пытаюсь сыграть в школьную игру «Ножницы из бумаги», но мои изображения не будут отображаться в ящиках

Question

пытаюсь сыграть в школьную игру «Ножницы из бумаги», но мои изображения не будут отображаться в ящиках

1

Я изо всех сил пытаюсь выяснить, почему, когда я нажимаю кнопку выбора кнопок для ножниц для рулонной бумаги, изображения в фильмах или компьютерах не отображаются.

Я знаю, что, вероятно, не хватает многого, но любая помощь будет делать. Если вы заметили что-то еще не совсем правильно с моим кодом, сообщите мне.

Я использую код, данный мне кем-то другим, и у меня возникают трудности с определением, где я ошибаюсь.

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <title>Project 03 Framework</title>

    <!-- link to css files -->
    <link rel="stylesheet" href="css/rps.css">
</head>

<body>

    <div class="choose">

        Choose Character


    </div>

    <div class="dragons">

        <img src="img/waterDragon1.png" class="drag" id="blue"><br><button id="water">WATER</button>


        <img src="img/redDragon.png" class="drag1" id="red">
        <button id="fire"> FIRE</button>

        <img src="img/greendragon.png" class="drag2" id="green">
        <button id="grass">GRASS</button>




    </div>


    <div class="player">
        HUMAN

    </div>


    <div class="playerChoice" id="humanPic">

    </div>

    <div class="cpu">
        COMPUTER

    </div>

    <div class="cpuChoice" id="computerPic"></div>

    <div class="restart" id="newGame">
        RESTART
    </div>

    <div class="rules">
        RULES
    </div>

    <div class="results"></div>

    <div class="playerTotals">
        SCORE
        <div class="box"></div>

    </div>








    <script src="js/rock.js"></script>
</body>

</html>

JS

var rPs = ["blue", "red", "green"];

var humanWins = 0;
var computerWins = 0;
var draws = 0;
var computer;
var computerImage;
var output;

document.getElementById('humanscore').innerHTML = humanwins;

/* water = rock, fire = paper, grass = scissors */
document.getElementById('water').onclick = function () {

    var playerchoice = "water";
    computerChoice();
    document.getElementById('humanPic').src = "img/waterDragon1.png";
    document.getElementById('computerPic').src = computerImage;
    compare(playerchoice);
}

document.getElementById('fire').onclick = function () {

    var playerchoice = "fire";
    document.getElementById('humanPic').src = "img/redDragon.png";
    document.getElementById('computerPic').src = computerImage;

    compare(playerchoice);
}


document.getElementById('grass').onclick = function () {

    var playerchoice = "grass";
    document.getElementById('humanPic').src = "img/greenDragon.png";
    document.getElementById('computerPic').src = computerImage;

    compare(playerchoice);
}

function compare(playerchoice) {

    var player = playerchoice;

    var computer = Math.floor(Math.random() * 3) + 1;


    if computer = 1 {

        computer = water;
        update computer images

    } else if computer = 2 {

        computer = fire;

    } else {

        computer = grass;

    }



    if (player === "water" && computer === "water") {
        tie
        update scores
        update message
    } else if (player === "water" && computer === "grass") {
        ai wins
        update scores
        update images
        update message
    } else if (player === "water" && computer === "fire") {

        humanWins++
        document.getElementById('humanscore').innerHTML = humanwins;
        player wins
        update scores
        update images
        update message

    } else if (player === "fire" && computer === "water") {
        ai wins
        update scores
        update images
        update message

    } else if (player === "fire" && computerchoice === "grass") {
        player wins
        update scores
        update images
        update message

    }
} else if (playerchoice === "fire" && computerchoice === "fire") {
    ai wins
    update scores
    update images
    update message

} else if (playerchoice === "grass" && computerchoice === "water") {
    player wins update scores
    update images
    update message
}
} else if (playerchoice === "grass" && computerchoice === "fire") {
    ai wins
    update scores
    update images
    update message

} else if (playerchoice === "grass" && computerchoice === "grass") {
    tie
    update scores
    update images
    update message
}





}

Sara Fudge 16 июль 2018, в 10:00

Источник

Теги:

javascript

image

buttonclick

1 ответ

Ещё вопросы

Ahmed Bajra · Answer 1 · 2018-07-16T04-58-00.000Z

document.getElementById('humanPic').src= "img/greenDragon.png" установит атрибут src <div> с идентификатором humanPic. Проблема в том, что <div> не используют атрибуты src.

Попробуйте использовать <img id="humanPic"> и сделайте то же самое с #computerImage.