數組中的input.value返回0

Question

我正在設置分數計數器，並且試圖顯示一條帶有我的獲勝分數輸入值的消息（玩家在其中選擇要玩的點數）。

當我在數組外部使用input.value時，它可以正常工作。 但是，當我嘗試在數組中使用它時，它返回0。

 var input = document.querySelector("#scoresInput"); var msgWindow = document.querySelector("#msgWindow"); var wsDisplay = document.querySelector("p span") // winning score display input.addEventListener("change", function(){ if(this.value <= 0){ msg("errorMsg", 2); }else{ msg("newMsg", 1); wsDisplay.textContent = this.value; } }); var msgIndex = [ "new game begins now you play to " + input.value + " scores", "you can't play to " + input.value + " scores(", "! player 1 is the winner!", "! player 2 is the winner!" ]; function msg(msgClass, i){ msgWindow.classList.add(msgClass); msgWindow.textContent = msgIndex[i]; } 

  <h1><span id="p1Display">0</span> - <span id="p2Display">0</span</h1> <p>you play to <span>3</span></p> <input id="scoresInput" type= "number"> <button id="p1">player1</button> <button id="p2">player2</button> <button id="reset">newGame</button> <p id="msgWindow"></p> 

//我希望輸入值的實時輸出，但是數組中的input.value始終返回0。

Answer 1

在數組值中使用變量會在執行賦值時復制該值，但這並不會使它每次使用數組時都重新評估該變量。

您可以在字符串中放置一個占位符，並將其替換為msg()函數。

如果您需要更多類似的替代品，則應該找到一個可以自動進行替換的模板庫。

 var input = document.querySelector("#scoresInput"); var msgWindow = document.querySelector("#msgWindow"); input.addEventListener("change", function() { if (this.value <= 0) { msg("errorMsg", 2); } else { msg("newMsg", 1); //wsDisplay.textContent = this.value; } }); var msgIndex = [ "new game begins now you play to {INPUTVALUE} scores", "you can't play to {INPUTVALUE} scores(", "! player 1 is the winner!", "! player 2 is the winner!" ]; function msg(msgClass, i) { msgWindow.classList.add(msgClass); msgWindow.textContent = msgIndex[i].replace('{INPUTVALUE}', input.value); } 

 <input id="scoresInput" type="number"> <button id="p1">player1</button> <button id="p2">player2</button> <button id="reset">newGame</button> <p id="msgWindow"></p>