CODEWITHSUNDEEP
javascripthtml
Amini
Amini

Reputation: 1792

Making Calculator using JavaScript but it doesn't work

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>

Upvotes: 2

Views: 105

Answers (2)

hbamithkumara
hbamithkumara

Reputation: 2544

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

Upvotes: 2

trincot
trincot

Reputation: 351369

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>

Upvotes: 3

Related Questions