数组中的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>