作法：按一下按钮，将html span（文字）更改为任何输入值

Question

我正在尝试根据输入内容来更新HTML中的范围。

换句话说，我希望将0到0更新为此处输入的任何数字：

以下是我尝试过的JS，但无法正常工作。 甚至可能在另一个addEventListener中有一个addEventListener吗？ 我现在也确定如何对函数进行排序（单击>定义值>将文本更改为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>

和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();
  });
});

Answer 1

您编写的代码仅在单击update按钮后才添加change事件侦听器。 这可能不是您想要的。 （每次单击按钮时，它还会添加一个新的侦听器，这绝对不是您想要的）。

如果只希望在单击更新按钮时更新值，则只需要一个事件。

 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>

如果要在更改字段时（但在提交字段之前）进行更新，那就是在使用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>

也许您只想在值更改后才单击更新，然后单击“更新”按钮来执行此操作，所以您不必侦听change事件，而只需在click事件侦听器中直接比较旧值和新值

let newValue = Number(numInput.value);
if (newValue !== winningScore) {
    winningScore = newValue;
    winningScoreDisplay.textContent = winningScore;
}

作法：按一下按钮，将html span（文字）更改为任何输入值

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-08-18 02:35:42

作法：按一下按钮，将html span（文字）更改为任何输入值

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-08-18 02:35:42

解决方案1
0 已采纳 2019-08-18 02:35:42