按钮内图片点击后无法显示问题求助

开发石头剪刀布网页应用时，遇到按钮内的图片点击后无法显示的问题，尝试排查错误但未成功，附上相关HTML、CSS、JavaScript代码及问题截图，恳请帮忙解决，谢谢。

问题截图 #

相关代码 #

HTML

<!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" />
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="game1styles.css" />
  </head>
  <body>
    <script src="Ania JS/Ania game1.js"></script>
  </body>
</html>

CSS

body {
  background-color: yellow;
  margin-top: 20px;
}

.gameTitle {
  display: flexbox;
}
.button {
  border: blue 1px solid;
  outline: auto;
  cursor: pointer;
  font-size: 1em;
  transition: 100ms;
  margin-top: 50px;
  margin-left: 5rem;
  justify-content: center;
}

.button:hover {
  transform: scale(1.2);
}

#scoreContainer {
  margin: 1000px;
  margin-top: 40px;
  margin-left: 7rem;
  display: inline-flex;
  /* display: grid; */
  /* grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center; */
  font-size: larger;
}

JavaScript

let gameTitle = document.createElement('div');
gameTitle.className = 'gameTitle';
gameTitle.innerHTML = '<b>ROCK PAPER SCISSORS</b>';
gameTitle.style.fontSize = '20px';
gameTitle.style.wordSpacing = '8px';
gameTitle.style.textAlign = 'center';
document.body.appendChild(gameTitle);

const choices = [
  '<img src="images/rockgame.jpg" alt = "rock" >',
  '<img src="images/papergame.jpg" alt = "paper" >',
  '<img src="images/scissorsgame.jpg" alt = "scissors">',
  // 'rock',
  // 'paper',
  // 'scissors',
];

let myPick = choices.innerHTML;

let buttonContainer = document.createElement('div');
buttonContainer.id = 'buttonContainer';
document.body.appendChild(buttonContainer);

const clickChoice = (show) => {
  const myChoice = show.innerHTML;
  const compChoice = choices[Math.floor(Math.random() * choices.length)];
  displayResults(myChoice, compChoice);
  console.log(show);
};

choices.forEach((choice) => {
  const button = document.createElement('button');
  button.className = 'button';
  button.innerHTML = choice;
  button.addEventListener('click', clickChoice);
  buttonContainer.appendChild(button);
});

let scoreContainer = document.createElement('div');
scoreContainer.id = 'scoreContainer';
document.body.append(scoreContainer);

let myChoice = document.createElement('div');
myChoice.classList.add('results', 'mine');
myChoice.innerHTML = 'You -' + myChoice;
scoreContainer.appendChild(myChoice);

let compChoice = document.createElement('div');
compChoice.classList.add('results', 'comp');
compChoice.innerHTML = 'Computer - ' + compChoice;
scoreContainer.appendChild(compChoice);

let result = document.createElement('div');
result.classList.add('results', 'final');
result.innerHTML = 'Score - ';
scoreContainer.appendChild(result);

const displayResults = (myChoice, compChoice) => {
  switch (myChoice + compChoice) {
    case 'scissorspaper':
    case 'rockscissors':
    case 'paperrock':
      scoreContainer.innerHTML = 'You' + myChoice + 'Computer' + compChoice;
      break;

    case 'papersciccors':
    case 'scissorsrock':
    case 'rockpaper':
      scoreContainer.innerHTML = 'You' + myChoice + 'Computer' + compChoice;
      break;
    case 'paperpaper':
    case 'scissorsscissors':
    case 'rockrock':
      scoreContainer.innerHTML = 'Even';

      break;
  }
};

问题原因及解决方法 #

1. 事件绑定逻辑错误
   绑定点击事件时直接传入clickChoice函数，触发时实际传入的是事件对象而非按钮元素，导致后续获取选择内容的逻辑失效。同时displayResults里直接用innerHTML覆盖整个分数容器，把原本的结果元素全部删除，破坏了页面结构。

2. 判断逻辑与存储内容不匹配
   choices数组存的是图片HTML字符串，但switch判断用的是纯文本组合（比如'scissorspaper'），两者拼接后无法匹配任何case，导致结果逻辑完全失效。

3. 变量命名冲突
   全局变量myChoice、compChoice和函数参数重名，导致代码逻辑混乱。

修复后的JavaScript代码

let gameTitle = document.createElement('div');
gameTitle.className = 'gameTitle';
gameTitle.innerHTML = '<b>ROCK PAPER SCISSORS</b>';
gameTitle.style.fontSize = '20px';
gameTitle.style.wordSpacing = '8px';
gameTitle.style.textAlign = 'center';
document.body.appendChild(gameTitle);

// 用对象存储选项的文本标识和图片HTML，兼顾判断和显示需求
const choices = [
  { text: 'rock', html: '<img src="images/rockgame.jpg" alt="rock">' },
  { text: 'paper', html: '<img src="images/papergame.jpg" alt="paper">' },
  { text: 'scissors', html: '<img src="images/scissorsgame.jpg" alt="scissors">' },
];

let buttonContainer = document.createElement('div');
buttonContainer.id = 'buttonContainer';
document.body.appendChild(buttonContainer);

const clickChoice = (e) => {
  // 通过事件对象获取点击的按钮，再匹配对应的选项文本
  const btnHtml = e.currentTarget.innerHTML;
  const myChoice = choices.find(item => item.html === btnHtml).text;
  const compChoice = choices[Math.floor(Math.random() * choices.length)];
  
  displayResults(myChoice, compChoice);
};

choices.forEach((choice) => {
  const button = document.createElement('button');
  button.className = 'button';
  button.innerHTML = choice.html;
  button.addEventListener('click', clickChoice);
  buttonContainer.appendChild(button);
});

let scoreContainer = document.createElement('div');
scoreContainer.id = 'scoreContainer';
document.body.append(scoreContainer);

// 提前保存结果元素引用，避免被覆盖
let myResultEl = document.createElement('div');
myResultEl.classList.add('results', 'mine');
scoreContainer.appendChild(myResultEl);

let compResultEl = document.createElement('div');
compResultEl.classList.add('results', 'comp');
scoreContainer.appendChild(compResultEl);

let finalResultEl = document.createElement('div');
finalResultEl.classList.add('results', 'final');
scoreContainer.appendChild(finalResultEl);

const displayResults = (myChoice, compChoice) => {
  // 更新单个元素内容，不破坏容器结构
  myResultEl.innerHTML = `你选择：${choices.find(item => item.text === myChoice).html}`;
  compResultEl.innerHTML = `电脑选择：${compChoice.html}`;
  
  let finalText = '';
  switch (myChoice + compChoice.text) {
    case 'scissorspaper':
    case 'rockscissors':
    case 'paperrock':
      finalText = '你赢了！';
      break;
    case 'paperscissors': // 修复原代码拼写错误：papersciccors
    case 'scissorsrock':
    case 'rockpaper':
      finalText = '电脑赢了！';
      break;
    case 'paperpaper':
    case 'scissorsscissors':
    case 'rockrock':
      finalText = '平局';
      break;
  }
  finalResultEl.innerHTML = `结果：${finalText}`;
};

额外优化建议

• 检查图片路径：确保images文件夹与HTML文件在同一目录，图片文件名无拼写错误。
• 调整CSS：#scoreContainer的margin: 1000px会导致元素被推到页面底部，建议改为margin: 40px 0 0 7rem。

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