i keep getting NaN when i get the result

Question

i am trying to do simple multiply and divide using javascript and dom here are the codes 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");

for some reason i keep getting Nan for everything i try ,thanks in advance

this is the 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>

thanks in advance <3

convert value to number, for example Number(value) or +value — Daniil Loban, Jan 05 '21 at 22:44
@DaniilLoban do you mean like this const fnum = document.getElementById("first-number").Number(value); — legendary child, Jan 05 '21 at 22:48
No, `const fnum = +document.getElementById("first-number").value;`. But that's not really the issue here because multiplication and division cause implicit conversion to a number to occur. — Scott Marcus, Jan 05 '21 at 22:52

score 1 · Accepted Answer · answered Jan 05 '21 at 22:54

You are calling the functions 'multiplyBy' and 'divideBy' without any parameters assigned. What you want to do is get 'first-number' and 'second-numbers' values in the function and then use the values.

Something like this:

"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");

Scott Marcus · Answer 2 · 2021-01-05T23:12:10.813

You get the values of the input fields when the page first loads, and at that point, they are empty (NaN: Not a Number). You must get the values at the time that the button is clicked. Also, your functions use arguments that are never passed (again, not numbers). Instead, you can forego the parameters and just use the values at button click time.

Additionally, avoid .innerHTML whenever you can as there are security and performance implications to using it. And, since you aren't processing any HTML strings, you certainly have no need for it. Instead, use .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>

Lastly, you should not be using inline HTML event attributes like onclick. This is a 25+ year old technique that we used in the earliest days of web scripting when we didn't have any standards and using this technique in 2021 has real implications for the execution of your code. Instead, follow modern standards and separate your JavaScript from your HTML and use .addEventListener() to wire up events.

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>

i keep getting NaN when i get the result

2 Answers2