I am attempting to refresh my number using the latest value obtained from a text input field in JavaScript

Question

I am attempting to refresh my number using the latest value obtained from a text input field in JavaScript

I am currently working on a JavaScript program that involves updating numbers in a field based on user input. For example, if the initial number in the field is 5 and the user enters 4 in the textfield, then the field should display the total of both numbers which would be 9.

document.getElementById('btn').addEventListener('click', () => {
  console.log("Button clicked")
  var newTotal = 0
  var input = parseInt(document.getElementById('text').value)
  newTotal = input
  if (newTotal) {
    console.log(newTotal)
    newTotal += input
  }
  console.log(newTotal)
  document.getElementById('textField').innerHTML = newTotal
  document.getElementById('text').value = ''
})

<input type="text" id="text">
<h3><span id="textField">0</span></h3>
<input type="submit" id="btn" value="Add Numbers">

javascript

Answer 1

Answer №1

Give this a shot, my friend. Make sure to set newTotal to 0 outside of the function. Otherwise, if it's inside the function, each time the function is called, newTotal will reset to 0 and then add the new input to itself.

Thank you.

let newTotal = 0

document.getElementById('btn').addEventListener('click', () => {
  const input = parseInt(document.getElementById('text').value)
  if (input) {
     newTotal += input
  }
  
  document.getElementById('textField').innerHTML = newTotal
  document.getElementById('text').value = ''
})

<input type="text" id="text">
<h3><span id="textField">0</span></h3>
<input type="submit" id="btn" value="Add Numbers">

Answer 2

Give this a shot, my friend. Make sure to set newTotal to 0 outside of the function. Otherwise, if it's inside the function, each time the function is called, newTotal will reset to 0 and then add the new input to itself.

Thank you.

let newTotal = 0

document.getElementById('btn').addEventListener('click', () => {
  const input = parseInt(document.getElementById('text').value)
  if (input) {
     newTotal += input
  }
  
  document.getElementById('textField').innerHTML = newTotal
  document.getElementById('text').value = ''
})

<input type="text" id="text">
<h3><span id="textField">0</span></h3>
<input type="submit" id="btn" value="Add Numbers">

Answer 3

Answer №2

document.getElementById('input-data')

        //Event listener for onchange event
        .addEventListener('change', () => {

            var val = document.getElementById("input-data").value;
			//Check if the input is a valid integer and display alert message
            if (isNaN(val)) { 
                document.getElementById('input-data').value = '';
                alert("Please enter a valid number");
                throw new Error("Invalid Number Entered");
            }
            //If input is a valid integer, add it to the existing value
            document.getElementById("output-field").innerHTML = 
                parseInt(document.getElementById("output-field").innerHTML) + parseInt(val);
            
            document.getElementById('input-data').value = '';
    })

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8>
    <title>Add Numbers</title>
</head>
<body>
    <input type="text" id="input-data">
    <h3><span id="output-field">0</span></h3>
</body>
</html>

Note: The throwing error and displaying alerts are not necessary.

Answer 4

document.getElementById('input-data')

        //Event listener for onchange event
        .addEventListener('change', () => {

            var val = document.getElementById("input-data").value;
			//Check if the input is a valid integer and display alert message
            if (isNaN(val)) { 
                document.getElementById('input-data').value = '';
                alert("Please enter a valid number");
                throw new Error("Invalid Number Entered");
            }
            //If input is a valid integer, add it to the existing value
            document.getElementById("output-field").innerHTML = 
                parseInt(document.getElementById("output-field").innerHTML) + parseInt(val);
            
            document.getElementById('input-data').value = '';
    })

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8>
    <title>Add Numbers</title>
</head>
<body>
    <input type="text" id="input-data">
    <h3><span id="output-field">0</span></h3>
</body>
</html>

Note: The throwing error and displaying alerts are not necessary.

I am attempting to refresh my number using the latest value obtained from a text input field in JavaScript

Answer №1

Answer №2

Similar questions

Load specific options only when needed while maintaining the previously selected state

Creating a Dynamic Ball Animation in JavaScript using Canvas

Tips to avoid conflicts between endpoints when building a REST API in an Express application

Is it time to use the JavaScript preload() function?

Adjust background image size to fit the screen, not just the content

I'm seeking assistance on how to utilize recursion to traverse through every element within the DOM

Exploring VueJS watchers: How to get started?

Ways to organize information based on the date

The code is functioning well on Chrome, Firefox, and Microsoft Edge; however, it seems to encounter issues when running on Safari

Unable to view Bootstrap Icons in Gulp 4

Learn the steps to emphasize the first row of a material table using React

Discover the positions of the y-axis tick marks with d3.js

Find the differences between two arrays of objects and create a new array containing only the matching items

Cloud function -> time stamps evaluation

Whenever a new entry is made into the textfield, the onChange feature triggers a reset on the content within the textfield

Converting complex mongodb data structures into Backbone.js Models/Collections

How can you choose all objects that are similar within an array, based on specific keys?

iterate through all the items in the radioButton collection

Tips for customizing the appearance of a label when a MUI Radio Button is selected

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to