我的代码出了什么问题，为什么事情没有显示出来，ai选择了：__
我的代码出了什么问题，为什么事情没有显示出来，ai选择了：__
提问于 2022-06-21 10:47:53
我在找人帮忙，所以当我用JavaScript制作我的石头剪刀时，我似乎被困住了，我不知道为什么aiChoice的值没有被分配，我不知道为什么它不显示“爱选择：__"，这是代码
let playerChoice = null;
let aiChoice = null;
let results = null;
let clicked = false;
rock.addEventListener("click", function(){
playerChoice+=0;
clicked = true;
you.textContent = "You chose: rock"
});
paper.addEventListener("click", function(){
playerChoice+=1;
clicked = true;
you.textContent = "You chose: paper"
});
scissors.addEventListener("click", function(){
playerChoice+=2;
clicked = true;
you.textContent = "You chose: scissors"
});
if(clicked) {
let var1 = Math.random() * 2;
aiChoice = Math.round(var1);
}
switch(aiChoice){
case 0:
ai.textContent = "AI Chose: rock";
break;
case 1:
ai.textContent = "AI Chose: paper";
break;
case 2:
ai.textContent = "AI Chose: scissors";
break;
}回答 2
Stack Overflow用户
发布于 2022-06-21 11:43:44
对于AiChoice来说，一个比这更简单的方法是有一个清单，上面有三个选项'rock'，‘纸张’，‘剪刀’，然后从列表中随机选择一个项目。对于播放器，您可以有3个按钮分别与类岩石纸和剪刀，然后点击按钮，生成aiChoice以及。下面是代码示例：
const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissor = document.querySelector('.scissor');
const playerOptions = [rock,paper,scissor];
const aiOptions = ['rock','paper','scissors'];
playerOptions.forEach(option => {
option.addEventListener('click',function(){
you.textContent = 'You chose: ${this.innerText}'
const choiceNo = Math.round(Math.random()*2);
const aiChoice = aiOptions[choiceNo];
ai.textContent = 'AI Chose: ${ aiChoice }';
}<div class="options">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissor">Scissors</button>
</div>
Stack Overflow用户
发布于 2022-06-21 15:07:54
在这里，我对您的代码做了一个小小的更改。众所周知，javascript不会等到上一行代码完成后才运行一行代码。因此，一旦运行代码，它就不会等待单击事件来检查单击的变量是否为真。这就是为什么ai.textContent没有正确设置的原因。为了克服这种情况，我将AI部件放入函数中，并在每次单击事件触发时调用它。
let playerChoice = null;
let aiChoice = null;
let results = null;
let you= {
textContent: ''
};
let ai = {
textContent: ''
};
var rock = document.getElementById("rock");
var paper = document.getElementById("paper");
var scissors = document.getElementById("scissors");
var textoutput = document.getElementById("textoutput");
rock.addEventListener("click", function(){
playerChoice = 0;
you.textContent = "You chose: rock";
aiAction();
});
paper.addEventListener("click", function(){
playerChoice = 1;
you.textContent = "You chose: paper";
aiAction();
});
scissors.addEventListener("click", function(){
playerChoice = 2;
you.textContent = "You chose: scissors";
aiAction();
});
function aiAction(){
let var1 = Math.random() * 2;
aiChoice = Math.round(var1);
switch(aiChoice){
case 0:
ai.textContent = "AI Chose: rock";
break;
case 1:
ai.textContent = "AI Chose: paper";
break;
case 2:
ai.textContent = "AI Chose: scissors";
break;
}
var output = `${you.textContent} & ${ai.textContent}`;
textoutput.innerHTML = output;
}<html>
<body>
<div>
<button id="rock">
rock
</button>
<button id="paper">
paper
</button>
<button id="scissors">
scissors
</button>
</div>
<p id="textoutput"></p>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72699448
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号