«Как добавить элементы в список, а затем добавить в пустое пространство ниже?»

Question

При тестировании кода любое введенное значение в списке исчезает после нажатия «ввод».

Я очень очень плохо знаком с программированием и веб-разработкой. Пожалуйста, будьте конкретны, чтобы я мог понять.

function addItem(){
  var item = document.getElementsByID("toDoInput").value;
  var text = document.createTextNode("item");
  var li = document.createElement("li");
  newItem.appendChild(text);
  document.getElementsByID("Ordered List").appendChild(newItem);
}



...
 <head>
    <link  rel= "stylesheet" href = "styles.css">
  </head>
  <body>
    <h1> To Do List </h1>
    <form id = "toDoForm">
      <input type = "text" id = "toDoInput">
      <button type = "button" onclick = "addItem()"> Click Me </button>
    </form>
    <ul id = "Ordered List"></ul>
    <script src="toDoList.js"></script>
...

Я ожидаю, что когда я введу слово в список, оно появится внизу. Вместо этого он исчезает.

Любой совет поможет.

javascript html

3

Alice Sloan 30 Апр 2019 в 21:51

Answer 1

Ваш код в основном прав.

Однако было несколько ошибок:

document.getElementsByID недействителен. Это document.getElementById
newItem не объявлен. Я думаю, что вы имели в виду li здесь

Обе эти проблемы вызвали ошибку, из-за которой ваша функция перестала бы выполняться преждевременно. Вам следует ознакомиться с консолью в инструментах разработчика вашего браузера, и вы увидите, что там будут регистрироваться ошибки.

Дополнительно:

document.createTextNode("item") создает текстовый узел только с текстом «элемент». Вместо этого вы захотите использовать значение из поля ввода.
Вы должны слушать событие submit, а не событие onclick.
- К сожалению, вам нужно вызвать preventDefault на onsubmit, чтобы страница не перемещалась в другом месте
- Вы можете инициировать событие отправки из формы с помощью кнопки, задав тип кнопки submit

Вот рабочая версия вашего кода:

function addItem(event) {
  event.preventDefault(); // don't let the form POST
  const input = document.getElementById("toDoInput");
  const text = document.createTextNode(input.value);
  const li = document.createElement("li");
  li.appendChild(text);
  document.getElementById("orderedList").appendChild(li);
  input.value = "";
}

<h1>To Do List</h1>
<form id="toDoForm" onsubmit="addItem(event)">
  <input type="text" id="toDoInput">
  <button type="submit">Click Me</button>
</form>
<ul id="orderedList"></ul>

В качестве альтернативы, и это лучшая практика, вообще не используйте onsubmit в разметке и связывайте событие, используя addEventListener:

document.getElementById("toDoForm").addEventListener("submit", addItem);

1

Kevin Raoofi 30 Апр 2019 в 19:44

Answer 2

Я думаю, что это непреднамеренная форма отправки.

Когда вы нажимаете ввод в форме, поведение по умолчанию - отправить форму. Затем страница создаст запрос к серверу. В вашем случае атрибут действия формы отсутствует, поэтому вы будете наблюдать за перезагрузкой страницы.

Возможные решения:

Удалить форму (используйте вместо этого div)
Отключить отправку при входе. Этот код сделает работу.


    document.getElementById("YOURFORMNAMEHERE").onkeypress = function(e) {
        var key = e.charCode || e.keyCode || 0;
        if (key == 13) {
            e.preventDefault();
        }
    }

1

Mino 30 Апр 2019 в 19:29

Answer 3

Если вы хотите предотвратить действие ввода ключа очистки и отправки формы

function addItem() {

  const input = document.getElementById("toDoInput");
  const text = document.createTextNode(input.value);
  const li = document.createElement("li");
  li.appendChild(text);
  document.getElementById("orderedList").appendChild(li);
  input.value = "";
  
  return false;
}

<form id="toDoForm" onsubmit="return addItem()">
  <input type="text" id="toDoInput">
  <button type="button" onclick="addItem()"> Click Me </button>
</form>
<ul id="orderedList"></ul>

1

Vishnu 30 Апр 2019 в 19:36

«Как добавить элементы в список, а затем добавить в пустое пространство ниже?»

3 ответа

Похожие вопросы

Новые вопросы

javascript