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
JavaScript
x
45
45
1
<html>2
<head>3
<link rel="stylesheet" href="styles.css">4
<title>April23</title>5
</head>6
<body>7
<!--Top Portion-->8
<div class="container1">9
10
<div class="calculator">11
<label for="num1" id="num1">Enter First Number </label>12
<input type="text" id="number0" name=num1 size=10> 13
</div>14
<div class="calculator">15
<label for="num2" id="num2">Enter Second Number</label>16
<input type="text" id="number1" name=num1 size=10> 17
</div>18
19
<div class="calculator2" id="button">20
<button id="btn">Get Result</button>21
</div>22
23
24
<div class="calculator">25
<label for="num2" id="sum"> Sum </label>26
<input type="text" id="number" name=num1 size=10> 27
</div>28
29
30
31
32
33
</div>34
35
<div class="container1" id="c2"></div>36
<div class="container1"></div>37
38
39
40
41
42
</body>43
<script src="main.js"></script>44
</html>45
JavaScript
JavaScript
1
34
34
1
/*this portion is to check if the blank input boxes are filled or not*/2
const num1 = document.querySelector('#number0');3
const num2 = document.querySelector('#number1');4
5
/*this portion is to grab the value of the input boxes if they are filled*/6
var number1=document.getElementById("number0").value;7
var number2=document.getElementById("number1").value;8
9
/*this portion is to convert the values into integers*/10
x = parseInt(number1);11
y = parseInt(number2);12
13
const calc = document.querySelector(".calculator2");14
15
16
17
18
19
calc.addEventListener('click', (e)=>20
{ 21
22
e.preventDefault();23
if(num1.value==='' || num2.value ===''){24
alert('please enter both numbers');25
}26
else{27
28
29
alert(x+y);30
}31
32
}33
)34
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
JavaScript
1
47
47
1
body{2
margin: 0;;3
/*background: url('image0.jpg') no-repeat; ;*/4
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;5
background-color: thistle;6
7
8
}9
10
11
.container1{12
position: relative; 13
height: 50vh;14
background: rgb(39, 105, 160);15
opacity: 0.9;16
display: flex;17
flex-direction: column;18
19
justify-content: center;20
gap: 2rem;21
22
}23
24
.calculator{25
margin-left: 4rem;26
}27
28
#number{29
margin-left: 7.5rem;30
}31
#number0{32
margin-left: 1rem;33
}34
35
36
37
38
#c2{39
40
background-color: rgb(196, 169, 169);41
}42
43
.calculator2{44
margin-left: 4rem;45
}46
47
Advertisement
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.
JavaScript
1
13
13
1
const calc = document.querySelector(".calculator2");2
3
calc.addEventListener("click", (e) => {4
e.preventDefault();5
const x = document.querySelector("#number0").value;6
const y = document.querySelector("#number1").value;7
8
if (x === "" || y === "") {9
alert("please enter both numbers");10
} else {11
alert(parseInt(x) + parseInt(y));12
}13
});JavaScript
1
39
39
1
body {2
margin: 0;3
;4
/*background: url('image0.jpg') no-repeat; ;*/5
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;6
background-color: thistle;7
}8
9
.container1 {10
padding: 2rem;11
position: relative;12
height: 50vh;13
background: rgb(39, 105, 160);14
opacity: 0.9;15
display: flex;16
flex-direction: column;17
justify-content: center;18
gap: 2rem;19
}20
21
.calculator {22
margin-left: 4rem;23
}24
25
#number {26
margin-left: 7.5rem;27
}28
29
#number0 {30
margin-left: 1rem;31
}32
33
#c2 {34
background-color: rgb(196, 169, 169);35
}36
37
.calculator2 {38
margin-left: 4rem;39
}JavaScript
1
23
23
1
<div class="container1">2
<div class="calculator">3
<label for="num1" id="num1">Enter First Number </label>4
<input type="number" id="number0" name=num1 size=10>5
</div>6
<div class="calculator">7
<label for="num2" id="num2">Enter Second Number</label>8
<input type="number" id="number1" name=num1 size=10>9
</div>10
11
<div class="calculator2" id="button">12
<button id="btn">Get Result</button>13
</div>14
15
16
<div class="calculator">17
<label for="num2" id="sum"> Sum </label>18
<input type="text" id="number" name=num1 size=10>19
</div>20
</div>21
22
<div class="container1" id="c2"></div>23
<div class="container1"></div>