作法：按一下按钮，将html span（文字）更改为任何输入值
[英]How to: click button, change html span (text) to whatever input value
问题描述
I am trying to update a span within my HTML based on whatever was typed into the input. 
我正在尝试根据输入内容来更新HTML中的范围。
In other words, I want 0 to 0 to be updated to whatever number was typed in here: 换句话说，我希望将0到0更新为此处输入的任何数字：
Below is the JS I tried, but it's not working. 以下是我尝试过的JS，但无法正常工作。 Is it even possible to have an addEventListener within another addEventListener? 甚至可能在另一个addEventListener中有一个addEventListener吗？ I'm also just now sure how to order the function (click > define value > change text to this.value ??) 我现在也确定如何对函数进行排序（单击>定义值>将文本更改为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: 和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 个解决方案
解决方案1
0 已采纳 2019-08-18 02:35:42
The code you have written adds the change event listener only after the update button is clicked. 您编写的代码仅在单击update按钮后才添加change事件侦听器。 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. 如果要在更改字段时（但在提交字段之前）进行更新，那就是在使用change事件时。
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 也许您只想在值更改后才单击更新，然后单击“更新”按钮来执行此操作，所以您不必侦听change事件，而只需在click事件侦听器中直接比较旧值和新值
let newValue = Number(numInput.value);
if (newValue !== winningScore) {
winningScore = newValue;
winningScoreDisplay.textContent = winningScore;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.