JavaScript计分器点击按钮不更新问题求助

你的代码存在两个关键问题导致计分无法更新：

1. JS文件引入方式错误
   HTML中使用了<source>标签引入app.js，但<source>仅用于<audio>/<video>等媒体元素加载资源，正确的JS引入应该用<script>标签。

2. 变量名使用错误
   在Player Two的点击事件处理函数中，你使用了未定义的p2Counter来修改文本内容，但实际定义的变量是p2Display，导致赋值无效。

修正后的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>Ping Pong</title>
</head>

<body>
  <h1><span id="p1Counter">0</span> to <span id="p2Counter">0</span></h1>
  <button id="playerOne">+1 Player One</button>
  <button id="playerTwo">+1 Player Two</button>
  <button id="reset">Reset</button>

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

</html>

修正后的JavaScript代码 #

const p1Display = document.querySelector('#p1Counter');
const p2Display = document.querySelector('#p2Counter');
const p1 = document.querySelector('#playerOne');
const p2 = document.querySelector('#playerTwo');
const reset = document.querySelector('#reset');
let scoreOne = 0;
let scoreTwo = 0;

p1.addEventListener('click', function() {
  scoreOne += 1;
  p1Display.textContent = scoreOne;
});
p2.addEventListener('click', function() {
  scoreTwo += 1;
  p2Display.textContent = scoreTwo;
});

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