努力使我的乘法“计算器”工作

Question

我正在努力使我在文本字段中输入的两个数字相乘，并向我展示乘法的答案。下面是当我点击乘法数字按钮((https://i.stack.imgur.com/WXEkm.png)](https://i.stack.imgur.com/WXEkm.png)时应该看到的样子

因此，我尝试了这里展示的内容：

<script>
      var userInput1 = document.getElementById("user-input-1");
      var userInput2 = document.getElementById("user-input-2");
      var numbersBtn = document.getElementById("numbers-btn");
      var outputDiv = document.getElementById("output-div");

      numbersBtn.onclick = getMultiplication;

      var number1 = userInput1.value;
      var number2 = userInput2.value;

      function getMultiplication(number1, number2) {
        var result = number1 * number2;
        return result;
      }

      outputDiv.innerHTML = getMultiplication(number1, number2);
    </script>

在网页上看起来是这样的：(https://i.stack.imgur.com/HxMCT.png)](https://i.stack.imgur.com/HxMCT.png)

当我在框中键入数字并单击按钮时，控制台日志中不会发生任何事情，也不会出现错误。

我也尝试过在userInputs后面不使用userInputs，但是它会显示NaN。我也试过其他命令的代码，仍然没有运气。

(我对JS非常陌生，参数是我最大的弱点之一)。

Answer 1

您需要在您的number1和number2中获取单击事件的值。

​

var userInput1 = document.getElementById("user-input-1");
var userInput2 = document.getElementById("user-input-2");
var numbersBtn = document.getElementById("numbers-btn");
var outputDiv = document.getElementById("output-div");

numbersBtn.onclick = ()=> {
    var number1 = userInput1.value;
    var number2 = userInput2.value;  
    outputDiv.innerHTML = getMultiplication(number1, number2);
}

function getMultiplication(number1, number2) {
  var result = number1 * number2;
     return result;
}

<input type="number" id="user-input-1">
<input type="number" id="user-input-2">
<button id="numbers-btn">Multiply Numbers</button>
<div id="output-div">0</div>

​

另一种实现相同功能的方法

​

let userInput1 = document.getElementById("user-input-1"),
    userInput2 = document.getElementById("user-input-2"),
    numbersBtn = document.getElementById("numbers-btn"),
    outputDiv = document.getElementById("output-div");

numbersBtn.onclick = ()=> {
    outputDiv.innerHTML = userInput1.value * userInput2.value;
}

<input type="text" id="user-input-1">
<input type="text" id="user-input-2">
<button id="numbers-btn">Multiply Numbers</button>
<div id="output-div">0</div>

​

Answer 2

首先，在代码执行后输入数字，所以必须在单击按钮时读取这些数字，而不是在页面加载时读取。您还希望在单击按钮时设置输出内容，因此在函数中设置输出innerHTML。

      var number1 = userInput1.value;
      var number2 = userInput2.value;

      function getMultiplication(number1, number2) {
        var result = number1 * number2;
        return result;
      }
      outputDiv.innerHTML = getMultiplication(number1, number2);

至

      function getMultiplication() {
        var number1 = userInput1.value;
        var number2 = userInput2.value;
        var result = number1 * number2;
        outputDiv.innerHTML = result;
      }

下面是一个功能齐全的演示：

​

var userInput1 = document.getElementById("user-input-1");
var userInput2 = document.getElementById("user-input-2");
var numbersBtn = document.getElementById("numbers-btn");
var outputDiv = document.getElementById("output-div");

numbersBtn.onclick = getMultiplication;

function getMultiplication(number1, number2) {
  var number1 = +userInput1.value;
  var number2 = +userInput2.value;
  var result = number1 * number2;
  outputDiv.innerHTML = result;
}

<input type="number" id="user-input-1" value="0"/>
<input type="number" id="user-input-2" value="0"/>
<button id="numbers-btn">
Calculate
</button>

<div id="output-div">
0
</div>

​

其次，输入的值存储为字符串，因此很好的做法是将其转换为一个数字，例如编写var number1 = Number(userInput1.value);。在您的情况下，这并不一定是因为乘法运算符自动尝试将操作数转换为数字。

Answer 3

默认情况下，JavaScript将值视为字符串，在进行任何数学处理之前，您应该先使用parseInt或parseFloat，然后在乘法之前在上面提到的函数中使用number1=parseInt(number1)和number2=parseInt(number2)。