如何拼接JavaScript字符串与变量并在HTML标题中展示？

你的代码无法正常运行的核心问题是提前获取了输入框的值，还有几处细节需要调整，下面是具体修正方案：

问题点拆解 #

• nameVar在页面加载完成时就被赋值了，此时用户还没在输入框中输入任何内容，所以document.getElementById("myNameIs").value是空字符串，点击按钮时只会把初始拼接好的空值替换到标题里。
• 输入框的type设置为username不是标准HTML输入类型，应该用text。
• 初始标题文本和需求不符，你需要的提交前显示“Welcome to Digital Journal.”，而非带逗号的版本。

修正后的代码 #

JavaScript 代码 #

function submitName() {
  // 点击按钮时才获取当前输入框的内容
  const userName = document.getElementById("myNameIs").value.trim();
  // 处理用户未输入的情况
  if (userName) {
    document.getElementById("beginWelcome").textContent = `Welcome to Digital Journal, ${userName}.`;
  } else {
    // 未输入时恢复初始标题
    document.getElementById("beginWelcome").textContent = "Welcome to Digital Journal.";
  }
}

HTML 代码 #

<div class="fadeInText">
  <!-- 修正初始标题文本 -->
  <h2 id="beginWelcome">Welcome to Digital Journal.</h2>
</div>

<div>
  <p id="nameQ">What's your name?</p>

  <div id="nameDiv">
    <!-- 把type改为标准的text，添加placeholder提示 -->
    <input type="text" id="myNameIs" placeholder="Enter your name">
  </div>
  <br>
  <div id="submitButtonDiv">
    <input onclick="submitName()" id="submitButton" type="button" value="Submit">
  </div>
</div>

额外优化说明 #

• 使用textContent替代innerHTML：如果用户输入了HTML代码，innerHTML会解析执行，存在安全风险，textContent只会渲染纯文本，更安全。
• 添加了trim()处理：去除用户输入前后的空格，避免空字符或空格导致的无效显示。
• 处理了未输入的情况：如果用户没输入内容就点击按钮，标题会恢复初始状态。
• 把按钮的type从submit改为button：因为这里没有表单，submit类型会默认触发表单提交行为（页面刷新），改用button避免不必要的页面刷新。

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