尝试检查输入中是否有空值

Question

我有一个输入框，可以使用 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");
  var task = document.input["task"].value;
  function getInputValue() {
    let value = document.getElementById("task").value;
    element.innerHTML = (value);
    document.getElementById("task1").style.color = "white";
  }
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="getInputValue();" onclick="changeColor()">+ Add</button>

Answer 1

<div id="tasklist">
  <p id="msg" style="color:red">You don't have any tasks.</p>
</div>
<br>

<script>
  const element = document.getElementById("msg");
  element.style.display = "none";

  function add() {
    let value = document.getElementById("task").value;

    if (value && value.trim() != "") {
      document.getElementById("task").value = "";
      element.style.display = "none";
      const taskContainer = document.getElementById('tasklist');

      const task = document.createElement('p');
      task.textContent = value;
      taskContainer.append(task)
    } else {
      element.style.display = "block";
    }

  }
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="add();">+ Add</button>

Answer 2

首先添加值检查器 - 它将阻止将innerHTML设置为“”。

其次，我认为您想在另一个任务中添加元素，而不是删除旧的元素。

使用 .append() 添加到父级末尾，或使用 prepend() 添加到父级开头。

 <div class="tasklist"><p id="task1" style="color:#d3d3a3">You don't have any tasks.</p></div><br>
    <script>
    const element = document.getElementById("task1");
    var task = document.input["task"].value;
    function changeColor(){console.log("color")};
    function getInputValue() {
    let value = document.getElementById("task").value;
    if(value.length>0){
    element.append(
        Object.assign(
            document.createElement("p"),
            {textContent:value}
        )
    );
    document.getElementById("task1").style.color = "white";}}
  </script>
  Enter a task:<br>
  <input type="text" id="task" name="task" placeholder="Pay Bills">
  <button onclick="getInputValue();changeColor()" >+ Add</button>

如果您想取代您的第一个孩子，那么

<div class="tasklist"><p id="task1" style="color:#d3d3a3">You don't have any tasks.</p></div><br>
    <script>
    const element = document.getElementById("task1");
    var task = document.input["task"].value;
    function getInputValue() {
    let value = document.getElementById("task").value;
    if(value.length>0){
    element.replaceChild(Object.assign(document.createElement("p"),{textContent:value}),element.firstChild);
    document.getElementById("task1").style.color = "white";}}
    </script>
  Enter a task:<br>
  <input type="text" id="task" name="task" placeholder="Pay Bills">
  <button onclick="getInputValue()" >+ Add</button>