I am new in JavaScript. As a result I was practicing some codes that reads two numbers from a form and display the result on a button click. I also want to add a reset button to start a new calculation. The problem is the result field is not updating on button click but the reset button is working. Below is my code:
const btn = document.getElementById('btn');
const calc = document.getElementById('calc');
function add() {
const num1 = parseInt(document.getElementById('num1').value);
const num2 = parseInt(document.getElementById('num2').value);
const result = document.getElementById('result');
if (num1 && num2 !== NaN) {
calc.addEventListener('click', () => {
let sum = num1 + num2;
result.value = sum;
return false;
});
} else {
alert("Enter Valid Number");
}
}
btn.addEventListener('click', () => {
num1.value = " ";
num2.value = " ";
result.value = " ";
});<form id="adder" onsubmit="return add();">
<input type="text" name="num1" id='num1' placeholder="enter number">
<input type="text" name="num2" id='num2' placeholder="enter number">
<button id="calc" type="button">Add</button>
<input type="text" name="num3" id="result" readonly placeholder="Result">
<button type="button" id="btn">Clear</button>
</form>You need to create addEventListener of calc button outside add(); and call add(); into event;
const btn = document.getElementById('btn');
const calc = document.getElementById('calc');
function add() {
const num1 = parseInt(document.getElementById('num1').value);
const num2 = parseInt(document.getElementById('num2').value);
const result = document.getElementById('result');
if (num1 && num2 !== NaN) {
let sum = num1 + num2;
result.value = sum;
return false;
} else {
alert("Enter Valid Number");
}
}
calc.addEventListener('click', () => {
add();
});
btn.addEventListener('click', () => {
num1.value = " ";
num2.value = " ";
result.value = " ";
});<form id="adder" onsubmit="return add();">
<input type="text" name="num1" id='num1' placeholder="enter number">
<input type="text" name="num2" id='num2' placeholder="enter number">
<button id="calc" type="button">Add</button>
<input type="text" name="num3" id="result" readonly placeholder="Result">
<button type="button" id="btn">Clear</button>
</form>onsubmit doesn't fire because you didn't add a submit button, anyway that method doesn't work because you add an eventListener that will work after press submit.