如何解决JavaScript中的[ObjectHmlButtonElement]问题

Question

抱歉打扰你们了。我知道，这个问题已经问了好几遍了。然而，我就是无法解决我的问题。

所以，我一直在尝试创建一个网球计分系统，当你点击两个按钮之一，赢按钮或输按钮时，就会显示出分数。我有一个按钮，他们可以在那里添加他们的名字到计分系统。当一个选手赢了两盘，比赛就结束了。然后我试着印上他们的名字，上面写着，____赢了比赛。当我尝试使用打印它们名称的变量时，我得到的结果是:[objectHTMLButtonElement]。我已经尝试了很长一段时间来解决这个问题，但我不知道该怎么做。

代码如下：

null

document.getElementById("youName").onclick = function() {
  var youName = prompt("Enter your name");
  document.getElementById("youOutput").innerHTML = youName + ":";
}

let points = 0;

function win() {
  points += 1;
  document.getElementById("points").innerHTML = points;

  if (points == 2) {
    document.getElementById("finish").innerHTML = youName + " won the match";
  }
}

html prettyprint-override"><button id="youName">Your name</button>

<p id="youOutput"></p>

<button onclick="win()">Won the point</button>

<p id="points"></p>

<p id="finish"></p>

null

提前道谢。

Answer 1

尝试在全局上下文中声明您的名称

let yourName = null;
document.getElementById("youName").onclick = function () {
    yourName = prompt("Enter your name");
    document.getElementById("youOutput").textContent = `${yourName}`;
};

let points = 0;

function win() {
    points += 1;
    document.getElementById("points").innerHTML = points;

    if (points == 2) {
        document.getElementById(
            "finish"
        ).textContent = `${yourName} won the match`;
    }
}