Javascript 我做了一个游戏，它应该显示两个图像时，我选择，但它只显示一个

我做了一个石头剪子游戏，除了一个部分，它工作得很好。我这样做是为了当你选择石头、布或剪刀时，计算机会删除所有图像，然后显示你的图像选择和机器人选择，以及你赢了、打了、输了的文本。问题是，它只显示我的选择，而没有显示机器人的选择

---

错误显示：

加载资源失败：服务器响应状态为404（未找到）

我尝试了所有我想不出来的东西

函数rpsGame（您的选择）{
console.log（您的选择）；
让人选择，让人选择；
humanChoice=yourChoice.id；
botChoice=numberToChoice（random（））；
结果=decideWinner（humanChoice，botChoice）
消息=最终消息（结果）；
rpsFrontEnd（yourChoice.id、botChoice.id、message）
};
函数随机（）{
返回Math.floor（Math.random（）*3）；
};
功能编号选择（编号）{
返回[‘石头’、‘布’、‘剪刀’][number]；
};
函数decideWinner（您的选择，botChoice）{
设rpsDataBase={
“摇滚乐”：{
"剪刀":1,，
“岩石”：0.5，
“纸张”：0
},
“文件”：{
"摇滚":1,，
“纸张”：0.5，
“剪刀”：0
},
“剪刀”：{
"论文":一,，
“剪刀”：0.5，
“rock”：0
}
};
让yourScore=rpsDataBase[yourChoice][botChoice]；
让botScore=rpsDataBase[botChoice][yourChoice]；
返回[yourScore，botScore]
};
函数最终消息（[yourScore，botScore]）{
如果（yourScore==0，botScore==1）{
返回{
“消息”：“你输了！”，
“颜色”：“红色”
};
}否则如果（yourScore==0.5，botScore==0.5）{
返回{
“留言”：这是一条领带，
“颜色”：“黄色”
};
}否则{
返回{
“消息”：你赢了，
“颜色”：“绿色”
}
}
}
函数rpsFrontEnd（humanImageChoice、botImageChoice、finalMessage）{
设imagesDataBase={
“rock”：document.getElementById（'rock'）.src，
“纸张”：document.getElementById（'paper'）.src，
“剪刀”：document.getElementById（“剪刀”）.src
}
document.getElementById（'rock'）.remove（）；
document.getElementById（'paper'）.remove（）；
document.getElementById（'剪刀'）.remove（）；
让humanDiv=document.createElement（'div'）；
让botDiv=document.createElement（'div'）；
让messageDiv=document.createElement（'div'）；
humanDiv.innerHTML=“”
messageDiv.innerHTML=”“+最终消息['message']+“”
botDiv.innerHTML=“”
document.getElementById（'flex-box-rps-div'）.appendChild（humanDiv）；
document.getElementById（'flex-box-rps-div'）.appendChild（messageDiv）；
document.getElementById（'flex-box-rps-div'）.appendChild（botDiv）；
}

.container-1，
.货柜-2，
.货柜-3{
边框：1px纯黑；
保证金：0自动；
宽度：75%；
文本对齐：居中；
}
.flex-box-container-1，
.flex-box-container-2，
.flex box rps{
显示器：flex；
边框：1px纯黑；
填充：10px；
证明内容：周围的空间；
柔性包装：包装；
}
.flex-box-container-1分区{
显示器：flex；
填充：10px；
边框：1px纯黑；
对齐项目：居中；
}
.flex-box-container-2 img{
利润率：10px；
盒影：0px 10px 50px rgba（0,0,0,0.7）；
高度：100px；
}
.flex box rps图像：悬停{
盒影：0px 10px 50px rgba（37,50233,1）；
}

石头、布、剪刀

我已对此进行了追踪，以找到问题所在

---

加载资源失败：服务器的响应状态为404（未找到）

错误是当无法找到@disifor注释的文件时。这可能是使用的图像之一，因此您需要检查引发此错误的URL

至于你的机器人没有给你一个结果，这是你的第一个功能中的一个问题：

function rpsGame(yourChoice) {
    console.log(yourChoice);
    let humanChoice, botChoice;
    humanChoice = yourChoice.id;
    botChoice = numberToChoice(random());
    results = decideWinner(humanChoice, botChoice)
    message = finalMessage(results);
    rpsFrontEnd(yourChoice.id, botChoice.id, message)
};

rpsFrontEnd（yourChoice.id、botChoice.id、message）

是导致问题的行。当您执行

botChoice=numberToChoice（random（））

，这会返回

岩石

、

纸

或

剪刀

。这会将这三个单词/字符串中的一个指定给

botChoice

。您正在执行的是

botChoice.id

，它是不需要的，因为

botChoice

不是像

yourChoice

那样的HTML元素。如果您将其更正为以下内容，则应使其正常工作：

function rpsGame(yourChoice) {
    console.log(yourChoice);
    let humanChoice, botChoice;
    humanChoice = yourChoice.id;
    botChoice = numberToChoice(random());
    results = decideWinner(humanChoice, botChoice)
    message = finalMessage(results);
    rpsFrontEnd(yourChoice.id, botChoice, message)
};

function random() {
    return Math.floor(Math.random() * 3);
};

function numberToChoice(number) {
    return ['rock', 'paper', 'scissors'] [number];
};

function decideWinner(yourChoice, botChoice) {
    let rpsDataBase = {
        'rock':{'scissors': 1, 'rock': 0.5, 'paper': 0},
        'paper':{'rock': 1, 'paper': 0.5, 'scissors': 0},
        'scissors':{'paper': 1, 'scissors': 0.5, 'rock': 0}
    };
    
    let yourScore = rpsDataBase[yourChoice] [botChoice];
    let botScore = rpsDataBase[botChoice] [yourChoice];

    return [yourScore, botScore]
};

function finalMessage([yourScore, botScore]) {
    if(yourScore === 0, botScore === 1) {
        return{'message': 'You Lost!', 'color': 'red'};
    }

    else if(yourScore === 0.5, botScore === 0.5) {
        return{'message': 'Its a Tie!', 'color': 'yellow'};
    }

    else{
        return{'message': 'You Won!', 'color': 'green'}
    }
}

function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
    let imagesDataBase = {
        'rock': document.getElementById('rock').src,
        'paper': document.getElementById('paper').src,
        'scissors': document.getElementById('scissors').src
    }

    document.getElementById('rock').remove();
    document.getElementById('paper').remove();
    document.getElementById('scissors').remove();

    let humanDiv = document.createElement('div');
    let botDiv = document.createElement('div');
    let messageDiv = document.createElement('div');
    
    humanDiv.innerHTML = "<img src='" + imagesDataBase[humanImageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
    messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size: 60px; padding: 30px; '>" + finalMessage['message'] + "</h1>"
    botDiv.innerHTML = "<img src='" + imagesDataBase[botImageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(243, 38, 24, 1);'>"

    document.getElementById('flex-box-rps-div').appendChild(humanDiv);
    document.getElementById('flex-box-rps-div').appendChild(messageDiv);
    document.getElementById('flex-box-rps-div').appendChild(botDiv);
}

函数rpsGame（您的选择）{
console.log（您的选择）；
让人选择，让人选择；
humanChoice=yourChoice.id；
botChoice=numberToChoice（random（））；
结果=decideWinner（humanChoice，botChoice）
消息=最终消息（结果）；
rpsFrontEnd（yourChoice.id、botChoice、message）
};
函数随机（）{
返回Math.floor（Math.random（）*3）；
};
功能编号选择（编号）{
返回[‘石头’、‘布’、‘剪刀’][number]；
};
函数decideWinner（您的选择，botChoice）{
设rpsDataBase={
“石头”：{“剪刀”：1，“石头”：0.5，“纸”：0}，
“纸”：{“石头”：1，“纸”：0.5，“剪刀”：0}，
“剪刀”：{“布”：1，“剪刀”：0.5，“石头”：0}
};
让yourScore=rpsDataBase[yourChoice][botChoice]；
让botScore=rpsDataBase[botChoice][yourChoice]；
返回[yourScore，botScore]
};
函数最终消息（[yourScore，botScore]）{
如果（yourScore==0，botScore==1）{
返回{'message'：'youlost！'，'color'：'red'}；
}
否则如果（yourScore==0.5，botScore==0.5）{
返回{'message'：'itsatie！'，'color'：'yellow'}；
}
否则{
返回{'message'：'youwon！'，'color'：'green'}
}
}
函数rpsFrontEnd（humanImageChoice、botImageChoice、finalMessage）{
设imagesDataBase={
“rock”：document.getElementById（'rock'）.src，
“纸张”：document.getElementById（'paper'）.src，
“剪刀”：document.getElementById（“剪刀”）.src
}
document.getElementById（'rock'）.remove（）；
document.getElementById（'paper'）.remove（）；
document.getElementById（‘剪刀’）.re