如何：单击按钮，将 html 跨度（文本）更改为任何输入值答案

【问题标题】：How to: click button, change html span (text) to whatever input value如何：单击按钮，将 html 跨度（文本）更改为任何输入值
【发布时间】：2019-08-18 02:15:20
【问题描述】：

我正在尝试根据输入的内容更新我的 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();
  });
});

【问题讨论】：

你能解释一下每个 SPAN 应该准确显示什么吗？
提醒你一下，你有三个，你没有定位到#p1Display或#p1Display的地方

标签： javascript html input text click

【解决方案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 事件，而只需直接比较旧值和新值在点击事件监听器中

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

【讨论】：