Javascript - 将两个输入字段相乘并显示答案

【问题标题】：Javascript - Multiply two input fields together and displayJavascript - 将两个输入字段相乘并显示
【发布时间】：2018-02-16 05:57:39
【问题描述】：

我的想法是我应该能够在两个字段中输入数字，然后我需要显示总和以及产品。
我想我会测试该产品，但我不断收到“不是数字”错误。任何帮助都会很棒！

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

  <script>

      function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(my_input1) * parseInt(my_input2);  document.write(theProduct);
          document.write(theProduct);


}

  </script>


  </body>
</html>

【问题讨论】：

my_input1 & my_input2 没有在任何地方声明。
嗨，my_input1 和 my_input2 未定义。 numOne 和 numTwo 应该是参数
我觉得你需要parseInt(numOne) * parseInt(numTwo)

标签： javascript forms function math getelementbyid

【解决方案1】：

您有未定义的 my_input1 和 my_input2。

改变这一行：

var theProduct = parseInt(my_input1) * parseInt(my_input2); document.write(theProduct);

这应该是正确的行：

var theProduct = parseInt(numOne) * parseInt(numTwo); document.write(theProduct);

显然，如果你想要总和：

var theTotal = parseInt(numOne) + parseInt(numTwo);

并打印出来：document.write(theTotal);

另外我想在我的答案中再添加一件事。如果您只是在测试，请改用它并在控制台中查看它：

console.log("Product: " + theProduct);
console.log("Total: " + theTotal);

如果您按照您的方式写入文档，您将删除所有内容，这意味着您需要刷新每个输入。不确定你是否意识到这一点。无论如何，这是供参考的功能。

function doMath() {
      var numOne = document.getElementById('num1').value;
      var numTwo = document.getElementById('num2').value;
      var theProduct = parseInt(numOne) * parseInt(numTwo);
      var theTotal = parseInt(numOne) + parseInt(numTwo);
      // document.write(theProduct);
      // document.write(theTotal);
      console.log("Product: " + theProduct);
      console.log("Total: " + theTotal);
}

【讨论】：

【解决方案2】：

这是您正确的代码版本，在上面的代码中您没有定义 my_input1 和 my_input2

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne) * parseInt(numTwo);
  document.write(theProduct);
}

<!DOCTYPE html>
<html>

<body>
  <form>
    First Number<br>
    <input id="num1" type="text" name="num1">
    <br> Second Number:<br>
    <input id="num2" type="text" name="num2">
    <br><br>
    <input type="button" value="Do Maths" onclick="doMath()" />
  </form>
</body>

</html>

【讨论】：

你检查小数点了吗？

【解决方案3】：

应该是这样的

function doMath() {
    var numOne = document.getElementById('num1').value;
    var numTwo = document.getElementById('num2').value;
    var theProduct = parseInt(numOne) * parseInt(numTwo);    
    document.write(theProduct);
}

【讨论】：

【解决方案4】：

此代码有效

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne) * parseInt(numTwo);
  var p = document.getElementById('theProduct');
  p.innerHTML += theProduct;
}

<div>
  First Number<br>
  <input id="num1" type="text" name="num1"><br> Second Number:<br>
  <input id="num2" type="text" name="num2">
  <br><br>
  <input type="button" value="Do Maths" onclick="doMath()" />
</div>
<div id="theProduct"></div>

【讨论】：

【解决方案5】：

我看到你写的一切都很好！除了你的代码中有一个错字my_input1 应该是numOne 并且第二个输入也一样。检查下面的sn-p

function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(numOne) * parseInt(numTwo); 
          document.write(theProduct);


}

<form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

【讨论】：

【解决方案6】：

<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onClick="javascript:doMath();" />
    </form>
    </body>
    </html>
    <script>
    function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = (parseInt(numOne) * parseInt(numTwo));
          console.log('Product:' + theProduct + '\nSum: ' + (parseInt(numOne) + parseInt(numTwo)));
    }
    </script>

【讨论】：

【解决方案7】：

你有 parseInt(my_input1) - 没有 my_input1。这是更正后的工作示例。

      function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(numOne) * parseInt(numTwo);     console.log (theProduct);
          document.getElementById('ans').innerHTML = theProduct;
          }

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" /><p/>
        Product: <span id="ans"></span>
    </form>



  </body>
</html>

【讨论】：

【解决方案8】：

// Your function here:
/*function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(my_input1) * parseInt(my_input2);
  document.write(theProduct);
  document.write(theProduct);
}*/

// New Function
function doMath() {
  var stringVals = [
    document.getElementById('num1').value,
    document.getELementById('num2').value
  ];
  
  var actualVals = vals.map((val) => parseInt(val))
    .filter((val) => !isNaN(val));
    
  var sum = actualVals.reduce((currentVal, nextVal) => currentVal + nextVal, 0);
  var product = actualVals.reduce((currentVal, nextVal) => currentVal * nextVal, 1);
  
  document.getElementById('theSum').innerHTML = 'Sum: ' + sum;
  document.getElementById('theProduct').innerHTML = 'Product: ' + product;
}

<!DOCTYPE html>
<html>
  <body>

    <form>
      First Number
      <br />
      <input id="num1" type="text" name="num1">
      <br />
      Second Number:
      <br />
      <input id="num2" type="text" name="num2">
      <br /><br />
      <input type="button" value="Do Maths" onclick="doMath();" />
      <div id="theSum"></div>
      <div id="theProduct"></div>
    </form>
    
    <script>
      // Include the JS from the snippet here.
    </script>
  </body>
</html>

【讨论】：

【解决方案9】：

使用 parseInt(numOne, 10) * parseInt(numTwo, 10); 代替 my_input1 和 my_input2 。还要注意使用 parseInt 时传递基数

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne, 10) * parseInt(numTwo, 10);
  document.write(theProduct);
}

<form>
  First Number<br>
  <input id="num1" type="text" name="num1">
  <br> Second Number:<br>
  <input id="num2" type="text" name="num2">
  <br><br>
  <input type="button" value="Do Maths" onclick="doMath();" />
</form>

【讨论】：

因为有两个document.write(theProduct);
大声笑！我删除了那个。 :p

【解决方案10】：

所有其他答案都很好，这意味着您错误地定义了对象名称。但我只是在不使用 parseInt() 的情况下添加了额外的方法。

如果您使用这些输入 type="number" 而不是 type="text"，那么您不需要执行 ParseInt()。

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = numOne * numTwo;
  document.write(theProduct);
}

<form>
  First Number<br>
  <input id="num1" type="number" name="num1">
  <br> Second Number:<br>
  <input id="num2" type="number" name="num2">
  <br><br>
  <input type="button" value="Do Maths" onclick="doMath();" />
</form>

【讨论】：

【解决方案11】：

您只需对这段代码做一点小改动：

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

  <script>

      function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(numOne) * parseInt(numTwo);  
          document.write(theProduct);


}

  </script>


  </body>
</html>

OR

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

  <script>

      function doMath() {
          var my_input1 = document.getElementById('num1').value;
          var my_input2 = document.getElementById('num2').value;
          var theProduct = parseInt(my_input1) * parseInt(my_input2);  
          document.write(theProduct);


}

  </script>


  </body>
</html>

使用声明的变量来执行操作。

【讨论】：

【解决方案12】：

    <!DOCTYPE html>
    <html>
      <body>

        <form>
            First Number<br>
            <input id="num1" type="text" name="num1">
        <br>
            Second Number:<br>
            <input id="num2" type="text" name="num2">
            <br><br>
          <input type="button" value="Do Maths" onclick="doMath();" />
        </form>

      <script>

          function doMath() {
              var numOne = document.getElementById('num1').value;
              var numTwo = document.getElementById('num2').value;
              var theProduct = parseInt(numOne) * parseInt(numTwo); 
              document.write(theProduct);
    }
// or
//       function doMath() {
//           var numOne = document.getElementById('num1').value;
//           var numTwo = document.getElementById('num2').value;
//           var theProduct = parseFloat(numOne) * parseFloat(numTwo); 
//           document.write(theProduct);
// }

      </script>
      </body>
    </html>

【讨论】：