选择计算机时图像不可见

enter image description hereThe Problem is when a computer chooses the choice, the image is not visible while the human choice image is clearly visible. Please help me out to debug where things went wrong. It shows the error ERR_FILE_NOT_FOUND. However the human choice image is clearly visible.

function rpsGame(yourChoice) {
    console.log(yourChoice);
    console.log(yourChoice.src);
    var humanChoice, botChoice;
    humanChoice = yourChoice.id;
   
    botChoice = numberToChoice(randToRpsInt());
    console.log('Computer Choose ',botChoice)
    
    results = decideWinner(humanChoice,botChoice);
    console.log(results);
   
    message =finalMessage(results);
    console.log(message);
    
    rpsFrontEnd(yourChoice.id,botChoice.in, message);

}

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

function numberToChoice(number) {
    return['stone','paper','scissor'][number]
}

function decideWinner(yourChoice,computerChoice) {
    var rpsDatabase = {
        'stone':{'stone':0.5,'paper':0,'scissor':1},
        'paper':{'stone':1,'paper':0.5,'scissor':0},
        'scissor':{'stone':0,'paper':1,'scissor':0.5}
    };
    var yourScore = rpsDatabase[yourChoice][computerChoice];
    var computerScore = rpsDatabase[computerChoice][yourChoice];
    
    return[yourScore,computerScore];
}

function finalMessage([yourScore,computerScore]) {
    if (yourScore === 0) {
        return{'message' : 'You Lost !', 'color': 'red'};
    } else if(yourScore === 0.5) {
        return{'message': 'You Tied !', 'color':'darkgoldenrod'};
    } else {
        return{'message': 'You Won !', 'color': 'green'};
    }
        
}

function rpsFrontEnd(humanImageChoice,botImageChoice,finalMessage) {
    var imageDatabase = {
        'stone':document.getElementById('stone').src,
        'paper':document.getElementById('paper').src,
        'scissor':document.getElementById('scissor').src,
     }
    //removing the imgages after clicking on it 
    document.getElementById('stone').remove();
    document.getElementById('paper').remove();
    document.getElementById('scissor').remove();
    
    var humanDiv = document.createElement('div');
    var messageDiv = document.createElement('div');
    var botDiv = document.createElement('div');
    
    humanDiv.innerHTML = "<img src='" + imageDatabase[humanImageChoice] +"'   height = 150 width = 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= '"+ imageDatabase[botImageChoice] + "' height=150 width=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);  
    
}

enter image description here

enter image description here

评论