Calculator variable multiplications NaN result (more than 2 variables) - Javascript

Cloudiskye
April 8, 2023
136 views
0 votes
2 Answers

So im trying to make a calculator to get into an IT school. But I cant seem to figure out why I get NaN as my answer.

What im supposed to make is a calculator with a feat, the feat being that you can also guess what the answer’ll be. Im stuck trying to figure out why I keep getting NaN as an answer to all my multiplications.

The reason why there is 2 number3’s in my var: product. that is because I found out I needed to have it in the multiplication to do the if statement. number3 is the one you guess withthis is how it looks, i translated the image if anyone was wondering

This is really bugging me since I like doing this but I cant seem to figure it out.

function CalculateProduct() {
var product = parseInt(number1) * parseInt(number2) * parseInt(number3) / parseInt(number3)

var number1 = document.getElementById("number1").value;

var nummer2 = document.getElementById("number2").value;

var number3 = document.getElementById("number3").value

var owncalculation= document.getElementById("owncalculation");

var uitkomst = document.getElementById("uitkomst");

if (number3 == product) {
    document.getElementById("owncalculation").innerHTML="The answer you put in was correct"
   } else {
    document.getElementById("owncalculation").innerHTML="The answer you put in was false"
   }

   if (Getal3 == product) {
    owncalculation.style.color = "green"
   } else {
    owncalculation.style.color = "red"
   }
   


result.innerHTML = "The answer to " + Getal1 + " * " + Getal2 + " = " + product;

}

<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
    <pre>
        <h1>Js Rekenmachine</h1>
        Voer een getal in:        <input type="number" id="Getal1">

        Voer een tweede getal in: <input type="number" id="Getal2">

        Zelf berekende uitkomst:  <input type="number" id="Getal3">

        <p id="uitkomst">De uitkomst is:</p>

        <span id="eigenberekening">Het door jou berekende antwoord 
 is:</span>

        
        
        <button type="button"

        class="btn btn-success btn-lg"
        onclick="BerekenSom()">Bereken som</button>  
        
        <button type="button"

        class="btn btn-success btn-lg"
        onclick="BerekenProduct()">Bereken Product</button>  
          </div>
    </pre>

 <script src="./app.js"></script>   

</body>
</html>

function BerekenProduct() { 

var Getal1 = document.getElementById("Getal1").value;
var Getal2 = document.getElementById("Getal2").value;
var Getal3 = document.getElementById("Getal3").value

var product = parseInt(Getal1) * parseInt(Getal2) 

document.getElementById("product").innerHTML = product

uitkomst.innerHTML = "Het product van " + Getal1 + " * " + Getal2 + " = " + product;

if (Getal3 == product) {
    document.getElementById("eigenberekening").innerHTML="Het door jou berekende antwoord is goed"
   } else {
    document.getElementById("eigenberekening").innerHTML="Het door jou berekende antwoord is fout"
   }

   if (Getal3 == product) {
    eigenberekening.style.color = "green"
   } else {
    eigenberekening.style.color = "red"
   }

}

Tags: javascript

Answers

Make sure to create the variables before you calculate the product

There was also a typo var number2 misspelled as var nummer2.

function CalculateProduct() { 

var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var number3 = document.getElementById("number3").value

var product = parseInt(number1) * parseInt(number2) 

document.getElementById("product").innerHTML = product

}

<input type="number" id="number1" ><br>
<input type="number" id="number2" ><br>
<input type="number" id="number3" ><br>
<div id="product" ></div><br>

<button onclick="CalculateProduct()">Calc</button>

Using your code

I have fixed the two errors, and marked them in the code below:

function BerekenProduct() {

  var Getal1 = document.getElementById("Getal1").value;
  var Getal2 = document.getElementById("Getal2").value;
  var Getal3 = document.getElementById("Getal3").value

  var product = parseInt(Getal1) * parseInt(Getal2)

  // Error 1. This line is no longer needed, because you don't have a cell with id `product`
  // document.getElementById("product").innerHTML = product

  // Error 2. This line was just `uitkomst.innerHTML = ...` in your code, but there is no Javascript variable called `uitkomst` in your code
  document.getElementById("uitkomst").innerHTML = "Het product van " + Getal1 + " * " + Getal2 + " = " + product;


  if (Getal3 == product) {
    document.getElementById("eigenberekening").innerHTML = "Het door jou berekende antwoord is goed"
  } else {
    document.getElementById("eigenberekening").innerHTML = "Het door jou berekende antwoord is fout"
  }

  if (Getal3 == product) {
    eigenberekening.style.color = "green"
  } else {
    eigenberekening.style.color = "red"
  }

}

<pre>
        <h1>Js Rekenmachine</h1>
        Voer een getal in:        <input type="number" id="Getal1">

        Voer een tweede getal in: <input type="number" id="Getal2">

        Zelf berekende uitkomst:  <input type="number" id="Getal3">

        <p id="uitkomst">De uitkomst is:</p>

        <span id="eigenberekening">Het door jou berekende antwoord 
 is:</span>

        
        
        <button type="button"

        class="btn btn-success btn-lg"
        onclick="BerekenSom()">Bereken som</button>  
        
        <button type="button"

        class="btn btn-success btn-lg"
        onclick="BerekenProduct()">Bereken Product</button>  
          </div>
    </pre>

EDIT WITH A SECOND SNIPPET!

Here is your homework, I had time to loose 😉

I don’t understand dutch, so I tried my best.

If you have question, feel free to comment.

Have a nice day.

        function Bereken(operator) { 
            var Getal1 = document.getElementById("Getal1").value;
            var Getal2 = document.getElementById("Getal2").value;
            var Getal3 = document.getElementById("Getal3").value;
            var juistAntwoord = document.getElementById("uitkomst");
            var antwoord = document.getElementById("eigenberekening");
            var calc = document.getElementById("calc");
            var product;
            
            if(operator==="product"){
                product = parseInt(Getal1) * parseInt(Getal2);
                calc.textContent = "product van " + Getal1 + " x " + Getal2 + " = " + product;
            }
            if(operator==="sum"){
                product = parseInt(Getal1) + parseInt(Getal2);
                calc.textContent = "som van " + Getal1 + " + " + Getal2 + " = " + product;
            }
            
            juistAntwoord.textContent = "De uitkomst is: " + product;
            antwoord.textContent = "Het door jou berekende antwoord is : " + Getal3
            if (Getal3 == product) {
                antwoord.innerHTML="Het door jou berekende antwoord is goed";
                antwoord.className = "juist";
            } else {
                antwoord.innerHTML="Het door jou berekende antwoord is fout";
                antwoord.className = "fout";
            }
        }

        .juist{
            color:#009900;
        }
        .fout{
            color:#990000;
        }

        <h1>Js Rekenmachine</h1>
        <p>Voer een getal in:        <input type="number" id="Getal1"></p>

        <p>Voer een tweede getal in: <input type="number" id="Getal2"></p>

        <p>Zelf berekende uitkomst:  <input type="number" id="Getal3"></p>

        <p id="uitkomst">De uitkomst is:</p>
        <p id="calc"></p>

        <h2 id="eigenberekening">Het door jou berekende antwoord is:</h2>

        <button type="button" class="btn btn-success btn-lg" onclick="Bereken('sum')">Bereken som</button>  
        
        <button type="button" class="btn btn-success btn-lg" onclick="Bereken('product')">Bereken Product</button>

Same code with – and / operators :

        function Bereken(operator) { 
            var Getal1 = document.getElementById("Getal1").value;
            var Getal2 = document.getElementById("Getal2").value;
            var Getal3 = document.getElementById("Getal3").value;
            var juistAntwoord = document.getElementById("uitkomst");
            var antwoord = document.getElementById("eigenberekening");
            var calc = document.getElementById("calc");
            var product;
            
            if(operator==="product"){
                product = parseInt(Getal1) * parseInt(Getal2);
                calc.textContent = "product van " + Getal1 + " x " + Getal2 + " = " + product;
            }
            if(operator==="sum"){
                product = parseInt(Getal1) + parseInt(Getal2);
                calc.textContent = "som van " + Getal1 + " + " + Getal2 + " = " + product;
            }
            if(operator==="aftrekken"){
                product = parseInt(Getal1) - parseInt(Getal2);
                calc.textContent = "afftrek van " + Getal1 + " - " + Getal2 + " = " + product;
            }
            if(operator==="verdeling"){
                product = parseInt(Getal1) / parseInt(Getal2);
                calc.textContent = "afftrek van " + Getal1 + " - " + Getal2 + " = " + product;
            }
            
            juistAntwoord.textContent = "De uitkomst is: " + product;
            antwoord.textContent = "Het door jou berekende antwoord is : " + Getal3
            
            if (Getal3 == product) {
                antwoord.innerHTML="Het door jou berekende antwoord is goed";
                antwoord.className = "juist";
            } else {
                antwoord.innerHTML="Het door jou berekende antwoord is fout";
                antwoord.className = "fout";
            }
        }

        .juist{
            color:#009900;
        }
        .fout{
            color:#990000;
        }

    <h1>Js Rekenmachine</h1>

    <p>Voer een getal in:        <input type="number" id="Getal1"></p>
    <p>Voer een tweede getal in: <input type="number" id="Getal2"></p>
    <p>Zelf berekende uitkomst:  <input type="number" id="Getal3"></p>
    <p id="uitkomst">De uitkomst is:</p>
    <p id="calc"></p>

    <h2 id="eigenberekening">Het door jou berekende antwoord is:</h2>

    <button type="button" class="btn btn-success btn-lg" onclick="Bereken('sum')">Bereken som</button>  
    <button type="button" class="btn btn-success btn-lg" onclick="Bereken('product')">Bereken Product</button>
    <button type="button" class="btn btn-success btn-lg" onclick="Bereken('aftrekken')">Bereken Aftrekken</button>
    <button type="button" class="btn btn-success btn-lg" onclick="Bereken('verdeling')">Bereken Verdeling</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Calculator variable multiplications NaN result (more than 2 variables) – Javascript

Answers

Make sure to create the variables before you calculate the product

Using your code