作法：按一下按鈕，將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