如何使用Math.random实现点击图片随机展示猫/青蛙并返回对错提示

修正后的完整实现 #

HTML代码

<h3>点击你认为后面藏着猫的图片！</h3>
<div id="output-div"></div>
<input type="image" src="img/person1.jpg" name="click" class="guess-btn" />
<input type="image" src="img/person2.jpg" name="click" class="guess-btn" />

JavaScript代码

const outputDiv = document.getElementById("output-div");
const guessBtns = document.querySelectorAll(".guess-btn");

// 给所有猜测按钮绑定点击事件
guessBtns.forEach(btn => {
  btn.addEventListener("click", handleGuess);
});

function handleGuess() {
  // 生成1-100的随机数，<=50为猫，>50为青蛙
  const randomNumber = Math.floor(Math.random() * 100 + 1);
  const isCat = randomNumber <= 50;
  const image = isCat ? "cat.jpg" : "frog.jpg";
  // 生成猜测结果提示
  const tip = isCat ? "恭喜你猜对啦！这就是猫~" : "很遗憾猜错了，这次是青蛙哦";
  
  // 拼接输出内容
  const message = `
    <p>${tip}</p>
    <h3>${image}</h3>
    <img src="img/${image}" alt="${isCat ? '猫' : '青蛙'}"/>
  `;
  outputDiv.innerHTML = message;
}

改动说明 #

• 移除了HTML中重复的id属性，改用通用类名guess-btn绑定点击事件，避免id冲突导致的功能失效
• 新增了点击事件监听逻辑，用户点击任意一张猜测图片后才触发随机逻辑，符合交互需求
• 补充了猜测结果判断逻辑，根据随机生成的结果返回对应的猜对/猜错提示
• 优化了变量作用域，把原来的全局变量改为函数内部变量，避免全局污染

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