Develop Reference

Add Two numbers from textbox using JavaScript

I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in a paragraph. But unfortunately the below code is not working. Clicking the button shows NAN in the Paragraph.
<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
let num1=parseInt(document.getElementById("num1"));
let num2=parseInt(document.getElementById("num2"));
let add=document.getElementById("add");
add.addEventListener("click",function(){
document.getElementById("para").innerHTML=num1+num2;
});
</script>

You are getting the elementById, but not getting that IDs value.
Add .value on the end of your getElementById
function addTogether()
{
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var sum = parseInt(val1) + parseInt(val2);
console.log(sum);
}
<input type="text" id="val1" />
<input type="text" id="val2" />
<input type="button" value="Add Them Together" onclick="addTogether();" />

You can simply do it like this
<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button><br>
<p id="para"></p>
<script>
let add=document.getElementById("add");
add.addEventListener("click",function(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var res = parseInt(num1) + parseInt(num2);
document.getElementById("para").innerHTML = res ;
});
</script>
here is the demo of working code
let add=document.getElementById("add");
add.addEventListener("click",function(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var res = parseInt(num1) + parseInt(num2);
document.getElementById("para").innerHTML = res ;
});
<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button>
<br>
<p id="para"></p>

you need to get the value of num1 and num2 and you need to get the value after you click -- so inside your function
<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
let add=document.getElementById("add");
add.addEventListener("click",function(){
let num1=parseInt(document.getElementById("num1").value);
let num2=parseInt(document.getElementById("num2").value);
document.getElementById("para").innerHTML=num1+num2;
});
</script>

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>

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>

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

Dynamicly change the input value of sum

Let say I have 2 input box to enter integer value and 1 input value for display the result of sum of 2 input box earlier.
How to make make not assigned input value default 0 integer..
Below are my code so far
<input type="text" id="txt1" onkeyup="sum();" />
<input type="text" id="txt2" onkeyup="sum();" />
<input type="text" id="txt3" />
function sum() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
Below are my demo.. Let say input 1 is value=1 and input 2=null, I wanna make Input 3 to be 1
http://jsfiddle.net/tLKLy/

doing
document.getElementById('txt3').value = 0
should work.
if not, this will work too
$("input:txt3").val("0");

You can add default value attribute to the input tags and it should work.
function sum() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
<input type="text" value="0" id="txt1" onkeyup="sum();" />
<input type="text" value="0" id="txt2" onkeyup="sum();" />
<input type="text" id="txt3" />
Also you could do something like this, if you don't want to see the initial zeros. Basically parse the input fields and check if the sum is a Number.
function sum() {
let num1 = +(document.getElementById('txt1').value);
let num2 = +(document.getElementById('txt2').value);
let sum = num1 + num2;
if (!isNaN(sum)) {
document.getElementById('txt3').value = sum;
}
}
<input type="text" id="txt1" onkeyup="sum();" />
<input type="text" id="txt2" onkeyup="sum();" />
<input type="text" id="txt3" />

function sum() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
<input type="text" id="txt1" value="0" onkeyup="sum();" />
<input type="text" id="txt2" value="0" onkeyup="sum();" />
<input type="text" id="txt3" value="0"/>
https://jsfiddle.net/VIKAS_123/yotg8d64/

Add two numbers and display result without clicking a button

I was trying to make a simple form that allows the user to add two numbers and I want it to show the total number once both of them are added without clicking any button or without page refresh
function add_number() {
var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").value = result;
}
<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">
I tried the above code but it is not working.

I was writing this as #TylerRoper and #kshetline made their useful comments, so I've incorporated them. Fundamentally what was needed was to add the event handler. I've also included a check for the parse failing so that you get a result even if one field is empty or non-numeric (it's treated as 0).
var text1 = document.getElementById("Text1");
var text2 = document.getElementById("Text2");
function add_number() {
var first_number = parseFloat(text1.value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(text2.value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("txtresult").value = result;
}
<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1" oninput="add_number()">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2" oninput="add_number()">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">

Good solution provided by #Nick. I just added a check that user can enter only numeric input. An alternative approach.
function add_number(e) {
if (isNumberKey(e)) {
setTimeout(() => {
var first_number = document.getElementById("Text1").value !== "" ? parseInt(document.getElementById("Text1").value) : 0;
var second_number = document.getElementById("Text2").value !== "" ? parseInt(document.getElementById("Text2").value) : 0;
var result = first_number + second_number;
document.getElementById("txtresult").value = result;
}, 50)
return true;
} else {
return false;
}
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
<p>Enter First Number : <input type="text" id="Text1" name="TextBox1" onkeypress="return add_number(event)"></p>
<p>Enter Second Number : <input type="text" id="Text2" name="TextBox2" onkeypress="return add_number(event)"></p>
<br>Result : <input type="text" id="txtresult" name="TextBox3">
Hope it will help you.

jQuery approach:
$('#Text1, #Text2').on("paste keyup",
function () {
var result = parseInt($("#Text1").val()) + parseInt($("#Text2").val());
$("#txtresult").val((isNaN(result) ? '' : result));
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Enter First Number:</p>
<input type="text" id="Text1" name="TextBox1">
<p>Enter Second Number:</p>
<input type="text" id="Text2" name="TextBox2">
<p>Result:</p>
<input type="text" id="txtresult" name="TextBox3">

function add_number() {
var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").value = result;
}
<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">
<p>
<input type="button" value="submit" onclick="add_number()">
<input type="reset" value="reset">

compute sum dynamically with javascript

I have two textboxes Num1 and Num2 and another textbox Sum having the value 10.
How can I do this wherein if the user will enter a number for Num1, it will add it to Sum and dynamically change the displayed number in the Sum textbox. If the user will enter a number in Num2 it will also add that number to the updated number shown in Sum textbox and dynamically change the value for Sum textbox also.
How to do this in Javascript?

Something like that:
<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>

Another version.
<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
Num 1: <input type="text" id="num1" name="num1" value="4"/&gt<br />
Num 2: <input type="text" id="num2" name="num2" value="6"/&gt<br />
Sum <input type="text" id="sum" name="sum" value="10">
<script type="text/javascript">
var _num1 = document.getElementById('num1');
var _num2 = document.getElementById('num2');
var _sum = document.getElementById('sum');
_num1.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
_num2.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
</script>
</body>
</html>

<input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>
function addNums() {
var num1 = parseInt(document.getElementById('Num1').value,10);
var num2 = parseInt(document.getElementById('Num2').value,10)
document.getElementById('Sum').value = (num1 + num2).toString();
}
There are other ways to reference the form items, but this one works.

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(){
var x=parseInt(document.getElementById("first").value);
var y=parseInt(document.getElementById("second").value);
document.getElementById("answer").value=(x+y);
}
</script>
<title>exam</title>
</head>
<body>
<form>
First:<input id="first" name="first" type="text"><br>
Second:<input id="second" name="second" type="text"><br>
Answer:<input id="answer" name="answer" type="text"><br>
<input onclick="calculate()" type="button" value="Addition">
</form>
</body>
</html>