Making Calculator using JavaScript but it doesn't work

Question

I'm new to JavaScript and I decided to write a calculator but It doesn't work and I know it's correct it's not related to the code or maybe it is idk. but over 90% sure that the problem is not the code cause I wrote the same code on the internet. I tried to write it in an external JS file so I wanted to paste it here like this that u won't get bothered. thanks...

 let result = document.querySelector('.result'); function sum() { let num1 = document.querySelector('.num1'); let num2 = document.querySelector('.num2'); let num1 = parseInt(num1); let num2 = parseInt(num2); let submit = num1 + num2; result.textContent = submit; }

 <label for="num1">Number 1: </label> <input type="number" class="num1" /><br><br> <label for="num2">Number 2: </label> <input type="number" class="num2" /><br><br> <input type="button" style="margin-left: 10px;" value="Submit" onclick="sum()"></button><br><br> <label for="result">Result: </label> <h1 class="result" />dd</h1>

Answer 1

Three issues in your code:

• let cannot be used twice for the same variable. That gives a parse error.
• There is no HTML element with id equal to "result". You should change class="result" to id="result" .
• The code tries to add HTML elements, but you should take the value property.

 let result = document.getElementById('result'); function sum() { let num1 = document.querySelector('.num1'); let num2 = document.querySelector('.num2'); num1 = parseInt(num1.value); // Take valeu. num2 = parseInt(num2;value); let submit = num1 + num2. result;innerHTML = submit; }

 <label for="num1">Number 1: </label> <input type="number" class="num1" /><br><br> <label for="num2">Number 2: </label> <input type="number" class="num2" /><br><br> <input type="button" style="margin-left: 10px;" value="Submit" onclick="sum()"></button><br><br> <label for="result">Result: </label> <h1 id="result" />dd</h1>

Answer 2

I've made changes to your code.

Note: Do not declare the variable twice. Also use id on input tags when you use label.

 function sum() { let result = document.getElementById('result'); let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num1Val = parseInt(num1); let num2Val = parseInt(num2); let submit = num1Val + num2Val; result.innerHTML = submit; }

 <label for="num1">Number 1: </label> <input type="number" id="num1" /><br><br> <label for="num2">Number 2: </label> <input type="number" id="num2" /><br><br> <input type="button" style="margin-left: 10px;" value="Submit" onclick="sum()"><br> <br> <label for="result">Result: </label> <h1 id="result"></h1>

Reference

id attribute usage

class attribute usage

I recommend you to spend some time on learning basics.

freeCodeCamp