如何使可点击图像返回唯一值？

x4shl7ld 于 2021-09-13 发布在 Java

关注(0)|答案(3)|浏览(300)

我想做一个蒙蒂霍尔模拟器。用户将看到三张一模一样的门图片，它们排成一行。他们通过点击图像一、二或三来选择自己的门。
我无法找到将该值转换为javascript的方法。我的意思是，我不知道如何告诉javascript，用户点击了，比如说，门1，然后将值1分配给一个变量，然后我可以使用这个变量。这是代码（它的价值）。我没能在千里之外找到解决方案）：

// ELEMENT VARIABLES
const instructions = document.getElementById('instructions');
const startGameButton = document.getElementById('startGameButton');
const door1 = document.getElementById('door1');
const door2 = document.getElementById('door2');
const door3 = document.getElementById('door3');

// CHOOSING THE PRIZE DOOR

let prizeDoor = Math.floor(Math.random() * 3 + 1);

// LOADING ALL EVENT LISTENERS

function loadEventListeners() {
    startGameButton.addEventListener('click', removeInstructionsAndButtonAndMakeDoorsAppear);
}

loadEventListeners();

function removeInstructionsAndButtonAndMakeDoorsAppear() {
    instructions.innerHTML = '';
    door1.style.display = 'block';
    door2.style.display = 'block';
    door3.style.display = 'block';
}

@import url('https://fonts.googleapis.com/css2?family=Acme&family=Dancing+Script&family=Festive&family=Lato:wght@100;300;400;700&family=Tourney:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Festive&family=Tourney:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Festive&family=Tourney:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Festive&family=Lato:wght@100;300;400;700&family=Tourney:wght@100;200;300;400;500&display=swap');

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Lato', 'Arial', sans-serif;
}

body {
    background-color: rgb(178, 237, 252);
}

.show-title {
    font-family: 'Dancing Script';
    text-align: center;
    font-size: 5rem;
    word-spacing: 3rem;
    letter-spacing: 1rem;
    margin-top: 1rem;
}

.introduction {
    position: absolute;
    font-family: 'Acme';
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    text-align: center;
}

.rules {
    font-size: 1.8rem;
    margin-top: 2rem;
}

.start-game {
    font-family: 'Tourney';
    color: white;
    font-size: 1.5rem;
    margin-top: 2rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    background-color: black;
    border-radius: 10px;;
}

.door-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;

}

.door-styling {
    margin-left: 8rem;
    cursor: pointer;
}

.door {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>MONTY HALL</title>
</head>
<body>

        <div class="title">
            <h1 class="show-title">THE MONTY HALL SHOW</h1>
        </div>

        <div class="introduction" id="instructions">
            <p class="welcome">Welcome to the Monty Hall Show.</p>

            <p class="rules">The rules are simple.  You'll be shown three doors, behind one of which is a jpeg of a briefcase full of cash.  Behind the others? <br><br>Goats.  <br><br>Yeah.  That's right.  Dirty, smelly, ungrateful goats.</p>

            <p class="rules">All you have to do is pick the door behind which you think lies the cash.  I will then open <em>one</em> of the two remaining doors.  You'll then be given an opportunity to stick with your original choice, or switch to the one remaining door.</p>

            <p class="rules">May the odds be ever in your favour.</p>
            <button class="start-game" id="startGameButton">I understand</button>
        </div>
        <div class="door-container">

                <img src="img/doors.jpg" class="door door-styling" id="door1">

                <img src="img/doors.jpg" class="door door-styling" id="door2">

                <img src="img/doors.jpg" class="door door-styling" id="door3">

        </div>

<script src="app.js"></script>

</body>
</html>

今天我已经为此工作了五个小时，想尽一切办法，用谷歌搜索我的屁股，但都没有用。如果您能提供任何帮助，我们将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/68340269/how-do-i-make-clickable-images-return-unique-values

3条答案

按热度按时间

2vuwiymt1#

将此函数添加到javascript中：

function doorClicked(doorNumber) {
  console.log('Clicked', doorNumber);
  // store to variable and do your thing
}

并在html中添加 onclick 到您的门图像：

<img src="img/doors.jpg" class="door door-styling" id="door1" onclick="doorClicked(1)">
<img src="img/doors.jpg" class="door door-styling" id="door2" onclick="doorClicked(2)">
<img src="img/doors.jpg" class="door door-styling" id="door3" onclick="doorClicked(3)">

赞(0）回复(0）举报 2021-09-13

rpppsulh2#

我认为这是一个很好的方法。只需单击创建一个事件并读取门id号。祝你好运

let selectedDoor = 0;

let doors = document.getElementsByClassName("door");
for (let i = 0; i < doors.length; i++) {
    doors[i].addEventListener("click", function(){
       selectedDoor = parseInt(this.id.split("door")[1]);
       console.log(selectedDoor);
    });
}

img {
    width: 150px;
    cursor: pointer;
    margin: 10px;
}

<img src="https://images.ole.com.ar/2021/07/10/g0_-ovqlt_720x0__1.jpg" class="door door-styling" id="door1">

<img src="https://images.ole.com.ar/2021/07/10/g0_-ovqlt_720x0__1.jpg" class="door door-styling" id="door2">

<img src="https://images.ole.com.ar/2021/07/10/g0_-ovqlt_720x0__1.jpg" class="door door-styling" id="door3">

赞(0）回复(0）举报 2021-09-13

x6492ojm3#

学习使用事件委派：

const 
  allDoors  = document.querySelector('#door-container')
, prizeDoor = Math.floor(Math.random() * 3 + 1);
  ;
allDoors.onclick = ({target}) =>
  {
  if (!target.matches('img')) return  // ignore clicks on spaces

  let good_door = (prizeDoor == target.dataset.door)

  allDoors.classList.add('no-more-click')
  target.classList.add( (good_door?'good':'wrong'))

  console.log(`expected is ${prizeDoor}, door clicked is ${target.dataset.door}, => ${good_door} `)
  }


# door-container img {

  cursor  : pointer;
  padding : 2px;
  border  : 5px solid grey;
  margin  : 2px;
}

# door-container img:hover {

  border-color   : yellow;
}

# door-container img.good {

  border-color   : green;
}

# door-container img.wrong {

  border-color   : red;
}
.no-more-click {
  pointer-events : none;
}

<div id="door-container">
  <img src="https://picsum.photos/id/1003/150" data-door="1">
  <img src="https://picsum.photos/id/1025/150" data-door="2">
  <img src="https://picsum.photos/id/1074/150" data-door="3">
</div>

赞(0）回复(0）举报 2021-09-13

我来回答

如何使可点击图像返回唯一值？

3条答案

相关问题

热门标签

最新问答