Question

我正在用普通的JavaScript制作石头，纸，剪刀的游戏。我有三个div，用户可以单击以选择岩石，纸张或剪刀。我还有一个空的div，我想用用户单击的div文本（“ rock”，“ paper”或“ scissors”）进行更新。但是，文本每次都显示为“未定义”。我的代码如下。有什么想法我做错了吗？

const yourChoice = document.querySelector('#your-choice');

function userChoice() {
  yourChoice.innerHTML = this.innerHTML;
}

<div id="your-choice-container">
  <div id="your-choice"></div>
</div>

<div id="choice-container">
  <div class="choice" id="rock" onclick="userChoice()">Rock</div>
  <div class="choice" id="paper" onclick="userChoice()">Paper</div>
  <div class="choice" id="scissors" onclick="userChoice()">Scissors</div>
</div>

Answer 1

您需要将要引用的对象作为参数传递。在函数上调用此函数将调用函数的作用域。不是对象

const yourChoice = document.querySelector('#your-choice');

function userChoice(obj) {
  yourChoice.innerHTML = obj.innerHTML;
}

<div id="your-choice-container">
  <div id="your-choice"></div>
</div>

<div id="choice-container">
  <div class="choice" id="rock" onclick="userChoice(this)">Rock</div>
  <div class="choice" id="paper" onclick="userChoice(this)">Paper</div>
  <div class="choice" id="scissors" onclick="userChoice(this)">Scissors</div>
</div>

Answer 2

在没有上下文的情况下且在strict mode外部调用时，函数内部的this将是window，并且window.innerHTML是未定义的，因为没有这样的全局变量。

通常，您不应该使用事件属性（例如onclick），而应该看看.addEventListener()

Answer 3

问题似乎与“ this”有关。一种方法是在如下函数中传递参数。

Here are some more solutions

const yourChoice = document.querySelector('#your-choice');

function userChoice(chosen) {
  yourChoice.innerHTML = chosen;
}

<div id="your-choice-container">
  <div id="your-choice"></div>
</div>

<div id="choice-container">
  <div class="choice" id="rock" onclick="userChoice('Rock')">Rock</div>
  <div class="choice" id="paper" onclick="userChoice('Paper')">Paper</div>
  <div class="choice" id="scissors" onclick="userChoice('Scissors')">Scissors</div>
</div>

在JS函数中使用“ this”更新innerHTML

3 个答案: