在JS函数中使用'this‘更新innerHTML
在JS函数中使用'this‘更新innerHTML
提问于 2018-08-07 04:18:11
我正在用普通的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>
回答 3
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 2018-08-07 04:23:00
当在没有上下文的情况下在strict mode外部调用时，函数内部的this将是window，而window.innerHTML是未定义的，因为没有这样的全局变量。
通常，您不应该使用事件属性(如onclick)，而应该使用.addEventListener()
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51715048
复制相关文章
相似问题