I'm a rookie JS programmer making first steps into programming, so I appreciate your help to help me learn it.
I have created a function that adds 5 to a value entered by the user in INPUT. The result is displayed in . It works perfectly. After clicking the button the result shows up. However, I want to use the same button to keep adding another 5 to the output value without entering a new value in the INPUT.
I've tried: -declaring the undefined value (let sum; )outside the function to make the variable global but it didn't work.
I was thinking about:
let sum;
let sum2;
function adder5() {
let userNumber = Number(document.querySelector("#yourNumber").value);
sum = userNumber + 5;
document.querySelector("#output").textContent = sum;
}
document.querySelector("#btn").addEventListener("click", adder5);
function adderContinue(sum) {
document.querySelector("#btn").addEventListener("click", function () {
sum2 = sum + 5;
});
document.querySelector("#output").textContent = sum2;
}<input id="yourNumber" type="number" />
<button id="btn">Calculate</button>
<p id="output"></p>I appreciate your help. Any hint will do because I'm stuck. BTW I realize that variable SUM changes into SUM2 after the first click event, but the code should work at least once.
You could use the input field's event to update the cached value and update it on button click.
const input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
let value = input.valueAsNumber;
input.oninput = function () {
value = this.valueAsNumber;
};
button.onclick = function () {
value += 5;
output.textContent = isNaN(value) ? '' : value;
};<input type="number" id="input" />
<button id="button">Calculate</button>
<p id="output"></p>let sum = 0;
let oldUserInput = 0;
function adder5() {
let currentUserInput = Number(document.querySelector("#yourNumber").value);
if(currentUserInput === oldUserInput){
sum = sum + 5;
} else {
sum = currentUserInput + 5;
// Update the oldUserInput to the current
oldUserInput = currentUserInput;
}
document.querySelector("#output").textContent = sum;
}
document.querySelector("#btn").addEventListener("click", adder5);