如何在JavaScript中拼接多个用户输入？代码异常求助

你的代码存在几个关键问题，导致无法正确获取输入框的实际内容：

1. 未获取输入框的实际值：你直接写了"fname"这类字符串，这只是固定文本，不是用户输入的内容。必须通过document.getElementById("元素ID").value来提取输入框的真实值。
2. 字符串拼接语法错误：你拼接的文本（比如Hello、your user id is）没有用引号包裹，JavaScript会将它们视为未定义变量，直接报错；同时标点与加号的搭配也有错误，比如"bday".这种写法完全不符合语法。
3. 未正确绑定结果容器：document.getElementById("answer");这句代码没有把获取到的元素赋值给变量，直接使用answer属于隐式全局变量操作，既不规范也容易引发问题。
4. HTML标签闭合错误：<p id=answer>的闭合标签写错了，应该是</p>而非<p>。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<body>
  <p> Please enter your First Name: <input type="text" id="fname"></p>
  <p> Please enter your Last Name: <input type="text" id="lname"></p>
  <p> Please enter your User ID: <input type="text" id="uid"></p>
  <p> Please enter your date of birth: <input type="date" id="bday"></p>

  <button onclick="getEls()">Click Here<br>
        When Done</button>

  <script>
    function getEls() {
      // 提取所有输入框的用户输入值
      const firstName = document.getElementById("fname").value;
      const lastName = document.getElementById("lname").value;
      const userId = document.getElementById("uid").value;
      const birthDay = document.getElementById("bday").value;
      // 获取用于展示结果的元素
      const answer = document.getElementById("answer");
      // 用模板字符串拼接内容，更简洁易读
      answer.innerHTML = `Hello ${firstName} ${lastName}, your user id is ${userId} and your birthday is ${birthDay}.`;
    }
  </script>

  <p id="answer"></p>
</body>

</html>

额外说明 #

这里使用了模板字符串（用反引号`包裹内容，变量通过${变量名}插入），相比传统的加号拼接，语法更直观，新手更容易理解和维护。

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