Problem with script that is suppose to add two numbers

I wrote up a code designed to add two numbers and it keeps returning a NaN when I ask for an answer, I am fairly new but would like to know why this code in particular does not work so I can make sure I don’t make the mistake again.

HTML

<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>April23</title>
</head>
<body>
<!--Top Portion-->
<div class="container1">

    <div class="calculator">
<label for="num1" id="num1">Enter First Number </label>
<input type="text" id="number0" name=num1 size=10>  
</div>
<div class="calculator">
<label for="num2" id="num2">Enter Second Number</label>
<input type="text" id="number1" name=num1 size=10>  
</div>

<div class="calculator2" id="button">
        <button id="btn">Get Result</button>
        </div>


<div class="calculator">
    <label for="num2" id="sum"> Sum   </label>
    <input type="text" id="number" name=num1 size=10>   
    </div>
    
    



</div>

<div class="container1" id="c2"></div>
<div class="container1"></div>





</body>
<script src="main.js"></script>
</html>

JavaScript

/*this portion is to check if the blank input boxes are filled or not*/
const num1 = document.querySelector('#number0');
const num2 = document.querySelector('#number1');

/*this portion is to grab the value of the input boxes if they are filled*/
var number1=document.getElementById("number0").value;
var number2=document.getElementById("number1").value;

/*this portion is to convert the values into integers*/
x = parseInt(number1);
y = parseInt(number2);

const calc = document.querySelector(".calculator2");





calc.addEventListener('click', (e)=>
{ 

    e.preventDefault();
if(num1.value===''  || num2.value ===''){
    alert('please enter both numbers');
}
else{

    
   alert(x+y);
}

}
)

So the first condition works and sends an alert box asking to input two numbers, the second condition returns a an Alert box with NaN instead of adding the two numbers

css

body{
margin: 0;;
/*background: url('image0.jpg') no-repeat;  ;*/
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: thistle;


}


.container1{
position: relative;  
height: 50vh;
background: rgb(39, 105, 160);
opacity: 0.9;
display: flex;
flex-direction: column;

justify-content: center;
gap: 2rem;

}

.calculator{
    margin-left: 4rem;
}

#number{
    margin-left: 7.5rem;
}
#number0{
margin-left: 1rem;
}




#c2{

    background-color: rgb(196, 169, 169);
}

.calculator2{
    margin-left: 4rem;
}

Answer

Take out the number after you click on the button not before. Everything else is great.

TIP: As you are adding the number there must be always a type number so it would be better to add type="number" on input so that the user cannot enter alphabets or special characters.

const calc = document.querySelector(".calculator2");

calc.addEventListener("click", (e) => {
  e.preventDefault();
  const x = document.querySelector("#number0").value;
  const y = document.querySelector("#number1").value;

  if (x === "" || y === "") {
    alert("please enter both numbers");
  } else {
    alert(parseInt(x) + parseInt(y));
  }
});

body {
  margin: 0;
  ;
  /*background: url('image0.jpg') no-repeat;  ;*/
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: thistle;
}

.container1 {
  padding: 2rem;
  position: relative;
  height: 50vh;
  background: rgb(39, 105, 160);
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.calculator {
  margin-left: 4rem;
}

#number {
  margin-left: 7.5rem;
}

#number0 {
  margin-left: 1rem;
}

#c2 {
  background-color: rgb(196, 169, 169);
}

.calculator2 {
  margin-left: 4rem;
}

<div class="container1">
  <div class="calculator">
    <label for="num1" id="num1">Enter First Number </label>
    <input type="number" id="number0" name=num1 size=10>
  </div>
  <div class="calculator">
    <label for="num2" id="num2">Enter Second Number</label>
    <input type="number" id="number1" name=num1 size=10>
  </div>

  <div class="calculator2" id="button">
    <button id="btn">Get Result</button>
  </div>


  <div class="calculator">
    <label for="num2" id="sum"> Sum </label>
    <input type="text" id="number" name=num1 size=10>
  </div>
</div>

<div class="container1" id="c2"></div>
<div class="container1"></div>

Advertisement

Answer