JS开发石头剪刀布：无法将按钮值传入函数参数如何解决

你写的按钮点击事件里通过this.value获取按钮value传入业务函数的逻辑本身是正确的，功能无法正常运行是代码里存在几个DOM操作和逻辑错误导致的，问题点如下：

• getElementsByClassName返回的是匹配元素的类数组集合，不是单个DOM节点，直接对集合调用innerHTML这类元素属性不会生效，需要取下标获取对应元素，或者直接用querySelector获取单个匹配元素
• DOM元素的HTML内容属性名是大小写敏感的，正确写法是innerHTML，全小写的innerhtml是无效属性，赋值操作不会触发页面更新
• 胜负判断的分支逻辑错误：玩家获胜的判断分支用了独立的if而非else if，会出现满足获胜条件后仍继续进入后续失败/平局判断的问题，导致结果计算错误
• 分数渲染逻辑位置错误：初始给分数节点赋值的代码写在全局作用域，只会在页面加载时执行一次，对局结束后分数更新时没有同步渲染到页面
• HTML结构缺失结果容器：JS中选择了class为Results的元素用来展示对局结果，但HTML代码里没有对应节点，会导致结果无法显示

修正后可直接运行的完整代码 #

HTML代码 #

<div class="Results"></div>
<div>玩家得分：<span class="playerScore">0</span></div>
<div>电脑得分：<span class="computerScore">0</span></div>
<button value="rock">石头</button>
<button value="paper">布</button>
<button value="scissors">剪刀</button>

JavaScript代码 #

const scorePlayer = document.querySelector(".playerScore")
const scoreComputer = document.querySelector(".computerScore")
const buttons = document.querySelectorAll("button")
const results = document.querySelector(".Results")

let playerScore = 0
let computerScore = 0

// 原有按钮取值传参逻辑无需修改，this.value可正确拿到按钮设置的value属性
buttons.forEach(button => {
  button.addEventListener('click', function() {
    playRound(this.value)
  })
})

function computerPlay() {
  const selections = ["rock", "paper", "scissors"]
  return selections[Math.floor(Math.random() * selections.length)];
}

function playRound(playerSelection) {
  const computerSelection = computerPlay()
  let result = ""

  if (
    (playerSelection === "rock" && computerSelection === "scissors") ||
    (playerSelection === "paper" && computerSelection === "rock") ||
    (playerSelection === "scissors" && computerSelection === "paper")
  ) {
    result = `你赢了！${playerSelection} 击败 ${computerSelection}！`
    playerScore++
  } else if (
    (playerSelection === "scissors" && computerSelection === "rock") ||
    (playerSelection === "rock" && computerSelection === "paper") ||
    (playerSelection === "paper" && computerSelection === "scissors")
  ) {
    result = `你输了！${computerSelection} 击败 ${playerSelection}！`
    computerScore++
  } else {
    result = "本局平局"
  }

  results.innerHTML = result
  scorePlayer.innerHTML = playerScore
  scoreComputer.innerHTML = computerScore
}

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