Create a function to compare 2 numbers

Question

I'm writing a function to calculate the sum, product, and see which number is greater. I have the sum and product, but when I try to compare the 2 numbers, it won't work. I'm trying to get all 3 items (sum, product, and comparison) to show when the button is clicked. Here is the code:

 <div class="container"> <div class="main"> <h1>Please enter two numbers</h1> <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p> <input type="button" id="btn" value="Submit" onclick="calculate()"> </div> <br> <div id="result"> </div> <!-- Function --> <script> function calculate() { var x = document.getElementById("num1").value; var y = document.getElementById("num2").value; var sum = parseInt(x) + parseInt(y); var product = parseInt(x) * parseInt(y); document.querySelector("#result").innerHTML = ("The sum is " + sum + " and the product is " + product); } </script> <!-- This was the if statement that won't work. I was placing this in the same function right after the 1st querySelector. if (x > y) { document.querySelector("#result").innerHTML = (x + " is greater than " + y); } else { document.querySelector("#result").innerHTML = (y + " is greater than " + x); } --> 

Answer 1

I moved the cast of x and y into integers to the assignment of that variables. Afterwards you can just use them as integers without worrying.

 function calculate() { var x = parseInt(document.getElementById("num1").value); var y = parseInt(document.getElementById("num2").value); var sum = x + y; var product = x * y; document.querySelector("#result").innerHTML = ("The sum is " + sum + " and the product is " + product + ". "); if (x > y) { document.querySelector("#result").innerHTML += (x + " is greater than " + y); // TODO: what about x == y ? } else { document.querySelector("#result").innerHTML += (y + " is greater than " + x); } } 

 <div class="container"> <div class="main"> <h1>Please enter two numbers</h1> <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p> <input type="button" id="btn" value="Submit" onclick="calculate()"> </div> <br> <div id="result"> </div> 

Answer 2

Don't parse the numbers several times. Parse them once and then use the parsed values.

Similarly, don't use querySelector to get the same element several times, use it once and save it into a variable that you can use later.

And since you're getting the element by ID, then it is better to use getElelementByID() instead of querySelector() .

 function calculate() { var x = document.getElementById("num1").value; var y = document.getElementById("num2").value; x = parseInt(x); y = parseInt(y); var sum = x + y; var product = x * y; var result = document.querySelector("#result"); result.innerHTML = "The sum is " + sum + " and the product is " + product + "<br/>"; if (x > y) { result.innerHTML += x + " is greater than " + y; } else { result.innerHTML += y + " is greater than " + x; } } 

 <div class="container"> <div class="main"> <h1>Please enter two numbers</h1> <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p> <input type="button" id="btn" value="Submit" onclick="calculate()"> </div> <br> <div id="result"> </div> 

Answer 3

Basically your Problem is that in your code you are overwriting your div element twice.for ex Your div element result for:

```

 if (x > y) {
      document.querySelector("#result").innerHTML = (x + " is greater than " + y);
    } else {
      document.querySelector("#result").innerHTML = (y + " is greater than " + x);
    }  

```

is replaced by immediate following value:

```

document.querySelector("#result").innerHTML = ("The sum is " +sum + " and the product is " + product);

``` I suggest you to either concatenate both innerHTML values or make a seperate div element for either of them.

Hope this will help you.