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