当我得到结果时，我一直得到 NaN

Question

我正在尝试使用 javascript 和 dom 进行简单的乘法和除法这是代码 javascript

     "use strict";
    console.groupCollapsed("exDom1");
    const fnum = document.getElementById("first-number").value;
    const snum = document.getElementById("second-number").value;
    function multiplyBy(number1, number2) {
      document.getElementById("result").innerHTML = number1 * number2;
    }
    function divideBy(number1, number2) {
      document.getElementById("result").innerHTML = number1 / number2;
    }
    
    console.groupEnd("exDom1");

出于某种原因，我尝试的一切都得到了 Nan，在此先感谢

这是html

    <!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>JavaScript: DOM </title>
    <script defer src="ex1.js"></script>

</head>

<body>
    <h1>JavaScript</h1>
    <p>In this exercise you have to define two functions in JavaScript to calculate multiplication and division of two
        numbers. </p>
    <ul>
        <li>The result has to be written below the buttons in the section which id is "result".</li>
        <li>Ues document.getElementById("result").innerHTML to set the value in the result section. </li>
        <li>Use document.getElementById("first-number").value to get the value of the first number. </li>
        <li>Use document.getElementById("second-number").value to get the value of the second number.</li>
    </ul>
    <div>
        <p>1st Number :
            <input type="text" id="first-number">
        </p>
        <p> 2nd Number:
            <input type="text" id="second-number">
        </p>

    </div>
    <input type="button" onClick="multiplyBy()" value="Multiply" />
    <input type="button" onClick="divideBy()" value="Divide" />

    <p>The Result is :
        <span id="result"></span>
    </p>
</body>

</html>

提前致谢<3

Answer 1

您在调用函数 'multiplyBy' 和 'divideBy' 时未分配任何参数。您要做的是在函数中获取 'first-number' 和 'second-numbers' 值，然后使用这些值。

像这样：

"use strict";
console.groupCollapsed("exDom1");

function multiplyBy() {
    const fnum = document.getElementById("first-number").value;
    const snum = document.getElementById("second-number").value;
    document.getElementById("result").innerHTML = fnum * snum;
}
function divideBy() {
    const fnum = document.getElementById("first-number").value;
    const snum = document.getElementById("second-number").value;
    document.getElementById("result").innerHTML = fnum / snum;
}

console.groupEnd("exDom1");

Answer 2

您在页面首次加载时获取输入字段的值，此时它们为空（NaN：不是数字）。您必须在单击按钮时获取值。此外，您的函数使用从未传递的参数（同样，不是数字）。相反，您可以放弃参数，只使用按钮单击时的值。

此外，请尽可能避免 .innerHTML，因为使用它会影响安全和性能。而且，由于您不处理任何 HTML 字符串，因此您当然不需要它。相反，使用 .textContent.

const fnum = document.getElementById("first-number");
const snum = document.getElementById("second-number");
const result = document.getElementById("result");

function multiplyBy() {
  result.textContent = fnum.value * snum.value;
}

function divideBy() {
  result.textContent = fnum.value / snum.value;
}
        
console.groupEnd("exDom1");

<div>
  <p>1st Number:<input type="text" id="first-number"></p>
  <p>2nd Number:<input type="text" id="second-number"></p>
</div>
<input type="button" onClick="multiplyBy()" value="Multiply">
<input type="button" onClick="divideBy()" value="Divide">
<p>The Result is : <span id="result"></span></p>

最后，you should not be using inline HTML event attributes like onclick。这是一项已有 25 年历史的技术，我们在早期的 Web 脚本编写中使用过，当时我们没有任何标准，并且在 2021 年使用该技术对您的代码的执行具有实际意义。相反，请遵循现代标准，将 JavaScript 与 HTML 分开，并使用 .addEventListener() 连接事件。

const fnum = document.getElementById("first-number");
const snum = document.getElementById("second-number");
const result = document.getElementById("result");

// The same event handler can be used for both buttons
document.querySelector("input[value='Multiply']").addEventListener("click", doMath);
document.querySelector("input[value='Divide']").addEventListener("click", doMath);

// All DOM event handlers are automatically passed a
// reference to the event that triggered them
function doMath(event) {
  // We can get a reference to the actual element that
  // triggered the event with event.target. So, depending
  // on which event.target was clicked, do the right math
  if(event.target.value === "Multiply"){
    result.textContent = fnum.value * snum.value;
  } else if(event.target.value === "Divide"){
    result.textContent = fnum.value / snum.value;
  }
}

<div>
  <p>1st Number:<input type="text" id="first-number"></p>
  <p>2nd Number:<input type="text" id="second-number"></p>
</div>
<input type="button" value="Multiply">
<input type="button" value="Divide">
<p>The Result is : <span id="result"></span></p>

当我得到结果时，我一直得到 NaN

i keep getting NaN when i get the result

javascript

nan