如何在HTML <p>标签多处显示变量值？为何第二次显示空白？

核心错误 #

1. 重复ID违反HTML规则：HTML页面中元素的ID必须唯一，你给两个<output>标签都设置了id="name"，而document.querySelector()只会匹配页面中第一个符合该ID的元素，所以第二个<output>永远不会被赋值，自然显示为空。
2. 选择器与ID不匹配（代码笔误）：你的JavaScript代码里用了#nameOutput作为选择器，但HTML里的<output>标签ID是name，这会导致第一个元素也无法正常显示，推测你是代码书写时的失误，两者需要保持一致。
3. 变量时机错误：原来的代码在页面加载时就获取输入框的值，此时用户还没输入内容，name变量会是空字符串，应该把获取值的逻辑放到fillData函数内部，确保每次调用函数时获取最新输入。

修正方案 #

方案一：使用唯一ID分别赋值 #

修改HTML，给两个<output>设置不同的唯一ID：

<p>I understand your name is <span><output id="nameOutput1"></output></span>.</p>
<p>It's nice to meet you <span><output id="nameOutput2"></output></span>.</p>

修改JavaScript，分别为两个ID的元素赋值，并调整获取输入值的时机：

function fillData() {
  // 每次调用函数时获取最新输入值
  var name = document.querySelector("#NameInput").value;
  document.querySelector("#nameOutput1").innerHTML = name;
  document.querySelector("#nameOutput2").innerHTML = name;
}

方案二：使用类选择器批量处理（更高效） #

如果需要展示的位置很多，用类选择器更方便：
修改HTML，给所有需要展示的<output>设置相同的类名：

<p>I understand your name is <span><output class="nameOutput"></output></span>.</p>
<p>It's nice to meet you <span><output class="nameOutput"></output></span>.</p>

修改JavaScript，批量获取元素并赋值：

function fillData() {
  var name = document.querySelector("#NameInput").value;
  // 遍历所有类为nameOutput的元素，设置内容
  document.querySelectorAll(".nameOutput").forEach(element => {
    element.innerHTML = name;
  });
}

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