堆棧內存溢出
  簡體   English   中英

Javascript - 將兩個輸入字段相乘並顯示

[英]Javascript - Multiply two input fields together and display

 原文  2018-02-16 05:57:39  2   12    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 個解決方案

解決方案1
 7  2018-02-16 06:02:03

您有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
 4  2018-02-16 06:07:08

這是您正確的代碼版本，在上面的代碼中您沒有定義 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
 3  2018-02-16 06:03:02

應該是這樣的

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

解決方案4
 3  2018-02-16 06:06:18

此代碼有效

 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
 2  2018-02-16 06:03:18

我看到你寫的一切都很好！ 除了你的代碼中有一個錯字， 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>

解決方案6
 2  2018-02-16 06:04:29

 <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
 2  2018-02-16 06:04:48

而不是my_input1 & my_input2使用parseInt(numOne, 10) * parseInt(numTwo, 10); .還要注意在使用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>

解決方案8
 2  2018-02-16 06:07:13

你有 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>

解決方案9
 2  2018-02-16 06:08:13

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

解決方案10
 2  2018-02-16 06:16:19

所有其他答案都很好，這意味着您錯誤地定義了對象名稱。 但我只是在不使用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
 0  2018-02-16 07:27:21

您只需為此代碼做一個小改動： 

 <!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
 0  2020-01-25 08:03:02

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將每個部分中的兩個字段與jQuery或JavaScript相乘 將兩個字段相乘（其中一個是標簽，另一個是文本框）並顯示在標簽中 使用javascript將各種輸入字段添加在一起 使用javascript中的偵聽器將輸入字段鏈接在一起 Javascript將Tiggzi App的兩個字段加在一起 Javascript將兩個字段/鍵加在一起 如何將兩個文本框相乘並使用JavaScript顯示結果 javaScript將兩個數字相乘並將結果顯示到第三個html輸入中 JavaScript將兩個ID相乘 如何僅使用 JavaScript 為兩個以上的輸入字段准確顯示表單驗證錯誤消息？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM