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

时间：2018-02-16 05:57:40

标签： javascript forms function math getelementbyid

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

<!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>

12 个答案:

答案 0 :(得分：6)

您的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);
}

答案 1 :(得分：3)

应该是这样的

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

答案 2 :(得分：3)

此代码有效

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：3)

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

＆＃13;
＆＃13; 
function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne) * parseInt(numTwo);
  document.write(theProduct);
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：2)

我看到你所写的一切都没问题！除了您的my_input1代码中的拼写错误应为numOne，第二个输入也应该相同。查看下面的代码段

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>

答案 5 :(得分：2)

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：2)

而不是my_input1＆amp; my_input2使用parseInt(numOne, 10) * parseInt(numTwo, 10);。请注意使用parseInt传递基数

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 7 :(得分：2)

你有parseInt（my_input1） - 没有my_input1。这是经过纠正的工作示例。

＆＃13;
＆＃13; 
      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;
          }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 8 :(得分：2)

// 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 :(得分：2)

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

  

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

＆＃13;
＆＃13; 
function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = numOne * numTwo;
  document.write(theProduct);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 10 :(得分：0)

您只需对此代码进行一项小改动：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13; 

   OR

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

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

答案 11 :(得分：0)

    <!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>
相关问题
最新问题