How to: click button, change html span (text) to whatever input value
Question
I am trying to update a span within my HTML based on whatever was typed into the input.
In other words, I want 0 to 0 to be updated to whatever number was typed in here:
Below is the JS I tried, but it's not working. Is it even possible to have an addEventListener within another addEventListener? I'm also just now sure how to order the function (click > define value > change text to this.value ??)
<!DOCTYPE html>
<html>
<head>
<title>Score Keeper</title>
<link rel="stylesheet" type="text/css" href="scorekeeper.css">
</head>
<body>
<h1>
<span id="p1Display">0</span> to <span id="p2Display">0</span>
</h1>
<p>Playing to: <span>5</span></p>
<input type="number">
<button id="update">update</button>
<script type="text/javascript" src="scorekeeper.js"></script>
</body>
</html>
And JavaScript:
var numInput = document.querySelector("input");
var winningScoreDisplay = document.querySelector("p span");
var winningScore = 5;
var updateButton = document.getElementById("update");
updateButton.addEventListener('click', function(){
numInput.addEventListener("change", function(){
winningScoreDisplay.textContent = this.value;
winningScore = Number(this.value);
reset();
});
});
1 answers
solution1
0 ACCPTED 2019-08-18 02:35:42
The code you have written adds the change event listener only after the update button is clicked. This is probably not what you want. (It also adds a new listener every time the button is clicked which is definitely not what you want).
If you only want the value updated when the updated button is clicked, you only need one event.
var numInput = document.querySelector("input"); var winningScoreDisplay = document.querySelector("p span"); var winningScore = 5; var updateButton = document.getElementById("update"); updateButton.addEventListener('click', function(){ winningScoreDisplay.textContent = numInput.value; winningScore = Number(numInput.value); });
<!DOCTYPE html> <html> <head> <title>Score Keeper</title> <link rel="stylesheet" type="text/css" href="scorekeeper.css"> </head> <body> <h1> <span id="p1Display">0</span> to <span id="p2Display">0</span> </h1> <p>Playing to: <span>5</span></p> <input type="number"> <button id="update">update</button> <script type="text/javascript" src="scorekeeper.js"></script> </body> </html>
If you want to update when the field is changed, but before it is submitted, that is when you use the change event.
var numInput = document.querySelector("input"); var winningScoreDisplay = document.querySelector("p span"); var winningScore = 5; var updateButton = document.getElementById("update"); numInput.addEventListener('change', function(){ winningScoreDisplay.textContent = this.value; winningScore = Number(this.value); });
<!DOCTYPE html> <html> <head> <title>Score Keeper</title> <link rel="stylesheet" type="text/css" href="scorekeeper.css"> </head> <body> <h1> <span id="p1Display">0</span> to <span id="p2Display">0</span> </h1> <p>Playing to: <span>5</span></p> <input type="number"> <button id="update">update</button> <script type="text/javascript" src="scorekeeper.js"></script> </body> </html>
Perhaps you are trying to only update when the value is changed and then the update button is clicked, to do that you don't need to listen for change event but instead need to just directly compare the old and new values in the click event listener
let newValue = Number(numInput.value);
if (newValue !== winningScore) {
winningScore = newValue;
winningScoreDisplay.textContent = winningScore;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.