如何实现点击不同图片返回对应唯一值，用于蒙提霍尔模拟器开发

解决方法 #

你只需要修改JS代码即可实现需求，无需调整现有HTML、CSS逻辑：

// 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');
// 把三个门存为数组方便统一绑定事件
const allDoors = [door1, door2, door3];

// 全局变量：获奖门、用户选中的门
let prizeDoor = Math.floor(Math.random() * 3 + 1);
let userSelectedDoor = null;


// LOADING ALL EVENT LISTENERS
function loadEventListeners() {
    startGameButton.addEventListener('click', removeInstructionsAndButtonAndMakeDoorsAppear);
    // 统一给三个门绑定点击事件
    allDoors.forEach(door => {
        door.addEventListener('click', onDoorClick)
    })
}

loadEventListeners();

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

// 新增：门点击事件处理逻辑
function onDoorClick(e) {
    // 从点击元素的id中提取门编号，转换为数字
    userSelectedDoor = Number(e.target.id.replace('door', ''));
    // 测试打印，确认取值正确，后续可以替换为你自己的业务逻辑
    console.log('用户选中的门编号：', userSelectedDoor);
}

如果想要更规范的实现，也可以给三个门的img标签增加自定义data属性，后续修改id命名也不会影响取值逻辑：

<img src="img/doors.jpg" class="door door-styling" id="door1" data-door-num="1">
<img src="img/doors.jpg" class="door door-styling" id="door2" data-door-num="2">
<img src="img/doors.jpg" class="door door-styling" id="door3" data-door-num="3">

对应的点击事件取值逻辑改为：

function onDoorClick(e) {
    userSelectedDoor = Number(e.target.dataset.doorNum);
}

内容的提问来源于stack exchange，提问作者Nellington