Исчезающие элементы в списке задач?

Question

Я создаю небольшое приложение для многоцелевого инструмента, который я нахожусь в процессе сборки (как личный проект). Я использую jQuery для краткости кода, но столкнулся с небольшой проблемой; при этом, когда я ввожу текст в текстовое поле и нажимаю кнопку, чтобы добавить его в список, он выглядит так, как будто он работает нормально, однако на экране ничего не появляется, а текстовое поле выглядит так, как будто оно все время было пустым. выделение красным. Код ниже:

$("#add-btn").on("click", function() {
  const newLi = document.createElement("li");
  const inputValue = $("#task-entry-box").val();
  const textNode = document.createTextNode(inputValue);
  newLi.appendChild(textNode);

  if (inputValue === "") {
    $("#task-entry-box").css("border", "1px solid red");
  } else {
    $("#task-entry-box").css("border", "");
    $("#todo-list").append(newLi);
  }
  $("#task-entry-box").val("");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="todo-container">

  <ul id="todo-list">

  </ul>

  <fieldset id="todo-add-form">
    <input id="task-entry-box" type="text" placeholder="What do you need to do? Get lunch, drink water etc." />
    <button id="add-btn"><i class="fa fa-plus-circle"></i></button>
  </fieldset>

</div>

Я полностью сбит с толку этим, поэтому, если кто-то может помочь объяснить, куда, черт возьми, вводится текст, который я вводю в текстовое поле, я бы ценить это.

PS В настоящее время я нахожусь на iPad и не буду иметь доступ к ноутбуку / компьютеру в течение нескольких дней, поэтому у меня нет доступа к консоли для проверки ошибок, поэтому я боюсь, что выиграл » не сможет обеспечить более глубокое понимание проблемы!

РЕДАКТИРОВАТЬ: Добавлен html код в.

Answer 1

Поскольку я не вижу ваши HTML, я должен догадаться, что вы неправильно выбираете элементы в вашем jQuery. Потому что код, который вы разместили, работает нормально.

$("#add-btn").on("click", function(){
     const newLi = document.createElement("li");
     const inputValue = $("#task-entry-box").val();
     const textNode = document.createTextNode(inputValue);
     newLi.appendChild(textNode);

     if(inputValue === ""){
       $("#task-entry-box").css("border", "1px solid red");
     }else{
       $("#task-entry-box").css("border", "");
       $("#todo-list").append(newLi);
     }
     $("#task-entry-box").val("");
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="task-entry-box"><button id="add-btn">
Add Task
</button>
<ul id="todo-list">

</ul>