javascript - 为什么无论单击哪个按钮都会得到相同的结果？

Question

我正在尝试制作一个基本程序，它获取两个 HTML 输入字段的值，并根据单击的按钮将它们相乘或相除。目前，我只是尝试通过 document.getElementById() 提醒乘法或除法按钮的值。

但是，目前它认为我已经单击了“乘法”按钮，即使我单击“除法”也是如此。

这是 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

您可以为每个按钮添加不同的功能

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>