时间戳

首页 > 解决方案 > 尝试创建一个回调函数以使用纯 JavaScript 获取 3 个不同 img 元素的 ID

javascript - 尝试创建一个回调函数以使用纯 JavaScript 获取 3 个不同 img 元素的 ID

问题描述

我正在尝试创建一个回调函数，该函数将从 3 个不同的点击图像中的 1 个中检索特定的 id。这些图像与石头、纸或剪刀相关。我希望能够从单击的图像中获取 id，并使用它与计算机的选择进行比较以确定获胜者。我将在下面包含一个codepen和我的代码。

提前致谢！

https://codepen.io/constequalsexcel/pen/MWwjjKa

HTML
'''
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>Rock Paper Scicssors Game</title>

        <link rel="stylesheet" href="styles.css" />
        <link
            href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
            rel="stylesheet"
        />
    </head>

    <body>
        <header>Rock, Paper, Scissors!</header>
        <h4>Choose your weapon!</h4>
        <div class="images">
            <img src="images/rock.png" id="rock" onclick="userChoiceFunction()" />

            <img src="images/paper.png" id="paper" onclick="userChoiceFunction()" />

            <img
                src="images/scissors.png"
                id="scissors"
                onclick="userChoiceFunction()"
            />
        </div>

        <h4 id="computer-message"></h4>
        <div class="outcome-messages"></div>

        <script src="scripts.js"></script>
    </body>
</html>
'''

CSS
''' 
header {
    text-align: center;
    margin-top: 50px;
    font-family: 'Roboto';
    font-size: 30px;
    font-weight: bold;
}

h4 {
    text-align: center;
    margin: 100px 0 60px 0;
    font-family: 'Roboto';
}

.images {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.images > button {
    margin-right: 30px;
    -ms-transition: 0.6s ease-in-out;
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}

.images > button:hover {
    margin-right: 30px;
    border: 2px solid green;
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}

.images img {
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
    margin: 10px 30px 0 30px;
}
'''
JS
'''
// click one of three images (rock, paper, or scissors) on screen
// computer randomly chooses one also (rock, paper or scissors)
// compare user selected and computer selected choices
// determine if user or computer wins
// dispaly result to the browser
// start process over so user can play again..

// get the id of clicked img
// set variable equal to img id
// pass variable to function to compare to computers choice



// generate random numbers for computer choice
// set random number equal to rock, paper, or scissors
// set variable equal to computers choice
let computerChoice = Math.ceil(Math.random() * 3);
if (computerChoice === 1) {
    computerChoice = 'rock';
} else if (computerChoice === 2) {
    computerChoice = 'paper';
} else {
    computerChoice = 'scissors';
}
//console.log(computerChoice);

/*
if (computerChoice === userChoice) {
    document.getElementById('computer-message').innerHTML = 'It was a tie!';
} else if (computerChoice === 'paper' && userChoice === 'scissors') {
    document.getElementById('computer-message').innerHTML =
        'The computer chose paper! You win!';
} else if (computerChoice === 'paper' && userChoice === 'rock') {
    document.getElementById('computer-message').innerHTML =
        'Computer chose paper! You lose!';
} else if (computerChoice === 'rock' && userChoice === 'paper') {
    document.getElementById('computer-message').innerHTML =
        'Computer chose rock! You win!';
}
*/
'''

标签： javascriptcallback

解决方案

你可以做这样的事情......

let imgChoice = document.querySelectorAll('.images img');
imgChoice.forEach(function(el, index) {
  el.addEventListener('click', compareChoice(el.id));
});

所以抓取图像元素，循环它们并为所有它们添加一个点击事件，当他们点击它时，它会运行一个函数。我称我的“比较选择”。然后，此函数可以获取计算机选择的内容并将其与传递给它的 id 进行比较。

推荐阅读