appendChild Возможно, удаляем элемент?

0

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

Я создал живой пример на CodePen, который вы можете посмотреть здесь: http://cdpn.io/hnBmD

Изменение: Код также расположен ниже?

Кажется, appendChild может удалить узел "li", который создает родительская функция? Может кто-нибудь, пожалуйста, дайте мне разумное объяснение этому?

Примечание. У меня есть JavaScript в отдельном файле, и он загружается непосредственно перед тегами тега body.

HTML:

<form>
 <p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>

JavaScript:

// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
      }
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
    var listItem = document.createElement("li");
    listItem.innerText = itemText;
    list.appendChild(listItem);
    itemText = inItemText.value = "";
}

Спасибо!

  • 0
    Покажите нам свой код!
  • 0
    appendChild никогда не должен ничего удалять, все, что он делает, это добавляет новый узел.
Показать ещё 4 комментария
Теги:

3 ответа

2
Лучший ответ

Вам нужно вернуть false из функции onclick после вызова addNewItem. В противном случае он отправит форму, которая перезагрузит страницу.

submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
        return false;
      }
}

DEMO

Или проще:

submitButton.onclick = function(){
    var itemText = inItemText.value.trim();
    if (itemText !== "" || itemText == " ") {
        addNewItem(document.getElementById("toDoList"), itemText);
    }
    return false;
}

Или, как один из предложенных комментариев, избавиться от формы, тогда нечего подавать.

Поделиться
  • 0
    Ах! Спасибо, Бармар! Можете ли вы поподробнее рассказать об этом «return false» и о том, как его правильно использовать? Я много слышал о том, почему это плохо, но не слышал слишком много причин, почему это хорошо.
  • 0
    return false используется в обработчике событий, чтобы предотвратить действие по умолчанию. В этом случае действие по умолчанию при нажатии на кнопку отправки - это отправить форму, и вы хотите предотвратить это.
2

Удалите форму, если это не необходимо, или просто запретите действие отправки формы по умолчанию.

submitButton.onclick = function (e) {
        e.preventDefault();
        var itemText = inItemText.value;
        if (itemText == "" || itemText == " ") {
            return false;
        } else {
            addNewItem(document.getElementById("toDoList"), itemText);
        }
 }
Поделиться
1

button элемент в вашем HTML имеет type атрибута submit. Когда срабатывает событие клика, выполняется действие по умолчанию, которое должно отправить форму. Вам необходимо предотвратить это поведение по умолчанию.

var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");

submitButton.onclick = function(e){
  e.preventDefault(); //prevent it from submitting
  var itemText = inItemText.value;
  if (itemText == "" || itemText == " ") {
    return false;
  } else {
    addNewItem(document.getElementById("toDoList"), itemText);
  }
}

function addNewItem(list, itemText) {
 var listItem = document.createElement("li");
 listItem.innerText = itemText;
 list.appendChild(listItem);
}
Поделиться
  • 0
    Спасибо тебе за это! Можете ли вы сказать мне разницу между этим и «вернуть ложь»? Кроме того, почему вы добавили параметр "е" в функцию? Спасибо!
  • 0
    @AaronBrewer Они оба будут препятствовать действию события по умолчанию. Функции-обработчики событий передают Объект-Событие в качестве аргумента. Здесь подробно рассказывают о событии. e это просто ссылка на объект они в объекте.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню