如何使用JS与HTML输出玩家姓名且不使用alert弹窗

AI 小北

2026-9-29

核心问题说明

JS中获取DOM使用的ID FirstName、LastName 和HTML中input实际设置的ID Player1Name、Player2Name 不匹配，无法正确获取输入值
表单submit按钮点击后默认会提交表单触发页面刷新，会中断JS逻辑执行
仅把输出内容打印在控制台，没有渲染到页面可见区域，自然看不到输出效果

修复后完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Print Names</title>
</head>
<body>
  <form method="get" id="nameForm">
    <label for="Player1Name">Player 1 Name:</label>
    <input type="text" id="Player1Name" name="player1Name" placeholder="Name"><br>
    <label for="Player2Name">Player 2 Name:</label>
    <input type="text" id="Player2Name" name="player2Name" placeholder="Name"><br>
    <input type="submit" value="Submit" class="btn">
  </form>
  <!-- 新增用来展示欢迎信息的容器，后续可以直接用CSS给这个元素加样式 -->
  <div id="welcomeMsg"></div>

  <script>
    // 绑定表单提交事件
    document.getElementById('nameForm').addEventListener('submit', function(e) {
      // 阻止表单默认提交刷新页面的行为
      e.preventDefault();
      // 获取正确的输入框值
      const player1 = document.getElementById("Player1Name").value;
      const player2 = document.getElementById("Player2Name").value;
      const printName = `欢迎两位玩家：${player1}、${player2}`;
      // 把内容渲染到页面容器里
      document.getElementById('welcomeMsg').textContent = printName;
      // 如果需要保留控制台输出可以保留下面这行
      console.log(printName);
    })
  </script>
</body>
</html>