如何通过JavaScript处理输入框空值，避免目标段落被清空？

直接给你改好的完整代码：

<div class="tasklist">
   <p id="task1" style="color:#d3d3a3">You don't have any tasks.</p>
</div><br>
<script>
  const element = document.getElementById("task1");
  function getInputValue() {
    let value = document.getElementById("task").value.trim();
    // 只有输入内容不为空（去除首尾空格后）才替换内容
    if (value) {
      element.innerHTML = value;
      element.style.color = "white";
      // 可选：添加后清空输入框，提升体验
      // document.getElementById("task").value = "";
    }
  }
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="getInputValue()">+ Add</button>

核心改动点： #

• 删掉了原代码里没用还可能报错的var task = document.input["task"].value;，这行写法本身不符合标准。
• 给输入值加了trim()处理，避免用户输入纯空格也触发内容替换。
• 新增if (value)判断逻辑：只有输入内容有效时才更新段落内容和颜色，空输入点击按钮不会改动原段落。
• 修复了按钮重复写onclick的问题，浏览器只会识别第一个onclick属性，现在合并成一个调用。

如果想让用户点击添加按钮后输入框自动清空，把代码里注释的那行去掉注释即可。

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