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>

I turned your code into a runnable snippet. As you see there is an error in your code. You cannot declare the same variable twice with let. If you would check the console, you would see that error. — trincot
– trincot, Commented Mar 27, 2021 at 18:35
Everything fixed. there was also another problem document.querySelector('.result').value; I see you are really professional you show me the way only with in sentence. thanks — Amini
– Amini, Commented Mar 27, 2021 at 18:41

trincot · Accepted Answer · 2021-03-27 18:40:40Z

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>

Rashed Rahat · Accepted Answer · 2021-03-27 19:00:34Z

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

Collectives™ on Stack Overflow

Making Calculator using JavaScript but it doesn't work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related