クリックするボタンに関係なく、同じ結果が得られるのはなぜですか？

Question

私は、2つのHTML入力フィールドの値を受け取り、どのボタンがクリックされたかによってそれらを乗算または分割する基本的なプログラムを作ろうとしています。現時点では、私はちょうどdocument.getElementById()を介して乗算または除算ボタンのいずれかの値を警告しようとしています。

しかし、私はDivideをクリックしても、私がMultiplyボタンをクリックしたと考えています。ここで

はHTMLです：

<form> 
    <input type="text" placeholder="enter a number" id="numOne"/> 
    <input type="text" placeholder="enter a number" id="numTwo"/> 
    <br> 
    <button id="M" onclick="calc()" value="Multiply">Multiply</button> 
    <button id="D" onclick="calc()" value="Divide">Divide</button> 
</form> 

とJavaScript：

function calc() { 
    if (document.getElementById('M').value === 'Multiply') { 
     alert('You clicked multiply'); 
    } else if (document.getElementById('D').value === 'Divide') { 
     alert('You clicked divide'); 
    } 
} 

私は自分自身をそれを把握し、それをルックアップするために試した、何も見つかりませんでした。

Answer 1

あなたは、そのボタンの値は常に「乗算」になりますので、最初のifチェック（if (document.getElementById('M').value === 'Multiply') {）は常にtrueと評価されます各ボタン

document.getElementById('M').addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    
 
    var val1 = document.getElementById('numOne').value; 
 
    var val2 = document.getElementById('numTwo').value; 
 
    var answ = document.getElementById('answer'); 
 
    
 
    answ.value = val1 * val2; 
 
}); 
 

 
document.getElementById('D').addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    
 
    var val1 = document.getElementById('numOne').value; 
 
    var val2 = document.getElementById('numTwo').value; 
 
    var answ = document.getElementById('answer'); 
 
    
 
    answ.value = val1/val2; 
 
});

<form> 
 
    <input placeholder="enter a number" id="numOne" /> 
 
    <input placeholder="enter a number" id="numTwo" /> 
 
    <br> 
 
    <button id="M">Multiply</button> 
 
    <button id="D">Divide</button> 
 
    <br><br> 
 
    <input id="answer" /> 
 
</form>

Answer 2

に別の機能を追加することができます。メソッドに何をするかを知らせるcalc()にonclickパラメータを渡すか、掛け算と除算のための別々のメソッドを定義し、それぞれをonclickと呼ぶことができます。

Answer 3

これは両方のボタンが同じ機能を持ち、最初にM idが掛け算されているかどうかをチェックしてtrueを返し、メッセージの掛け算をクリックしたため、同じクラス名を使用して値をチェックしてから働くでしょう。それとも、このようにそれを行う：あなたが変えることはない状態をチェックした

function calc(thisValue) { 
 
    if (thisValue === 'Multiply') { 
 
     alert('You clicked multiply'); 
 
    } else if (thisValue === 'Divide') { 
 
     alert('You clicked divide'); 
 
    } 
 
}

<form> 
 
<input type="text" placeholder="enter a number" id="numOne"/> 
 
<input type="text" placeholder="enter a number" id="numTwo"/> 
 
    <br> 
 
<button onclick="calc(this.value)" value="Multiply">Multiply</button> 
 
<button onclick="calc(this.value)" value="Divide">Divide</button> 
 
</form>

Answer 4

。 ID Mは常にMultiplyの値を持ち、Dの値は常にDivideです。

あなたはクリックされたボタンのIDを動的に調べることを考えていた可能性があります。これは、イベントオブジェクトを渡して、event.currentTargetを使用してその要素への参照を取得し、見つかったIDに基づいて動作させることで実行できます。

function calc(event) { 
 
    // Stop the form from submitting 
 
    event.preventDefault(); 
 
    
 
    // Find which button was clicked. 
 
    const btn = event.currentTarget; 
 
    
 
    // Use the ID of btn to decide what to do 
 
    switch (btn.id) { 
 
    case "M": 
 
    alert('You clicked multiply'); 
 
    break; 
 
    case "D": 
 
    alert('You clicked divide'); 
 
    break; 
 
    } 
 
}

<form> 
 
    <input type="text" placeholder="enter a number" id="numOne" /> 
 
    <input type="text" placeholder="enter a number" id="numTwo" /> 
 
    <br> 
 
    <button id="M" onclick="calc(event)" value="Multiply">Multiply</button> 
 
    <button id="D" onclick="calc(event)" value="Divide">Divide</button> 
 
</form>