时间戳

首页 > 解决方案 > 计算机选择选项时图像不可见

javascript - 计算机选择选项时图像不可见

问题描述

在此处输入图像描述问题是当计算机选择选项时，图像不可见，而人类选择的图像清晰可见。请帮我调试出问题的地方。它显示错误 ERR_FILE_NOT_FOUND。然而，人类选择的图像清晰可见。

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);  
    
}

在此处输入图像描述

在此处输入图像描述

标签： javascripthtmlcss

解决方案

rpsFrontEnd(yourChoice.id, botChoice, message); //将 botChoice.id 替换为 botChoice

推荐阅读