我正在用普通的JavaScript做一个石头,布,剪刀的游戏。我有三个div,可以选择石头、布或剪刀,用户可以单击它们。我有另一个空的div,我想用用户点击的div的文本(‘石头’、‘布’或‘剪刀’)来更新它。但是,文本每次都显示为“未定义”。我的代码如下。你知道我做错了什么吗?
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>
发布于 2018-08-07 04:21:53
您需要将正在引用的对象作为参数进行传递。在函数上调用此函数将调用函数的作用域。不是对象
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>
发布于 2018-08-07 04:23:00
当在没有上下文的情况下在strict mode外部调用时,函数内部的this
将是window
,而window.innerHTML
是未定义的,因为没有这样的全局变量。
通常,您不应该使用事件属性(如onclick
),而应该使用.addEventListener()
发布于 2018-08-07 04:23:17
问题似乎出在“这个”上。一种方法是在函数中传入一个参数,如下所示。
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>
https://stackoverflow.com/questions/51715048
复制相似问题