Dodanie elementu na strone JS

Question

Witam wszystkich jestem początkującym, który postanowił napisać swoj projekt w JS, padło na ToDoList z która niestety mam problem a mianowicie chce aby po kliknieciu w przycisk wykonała się funkcja która pobierze wartość z inputa utworzy nowy element listy ul>li do której przypisze wartość z pobranego elementu input. wszystko wydaje sie ok po nacisnięciu przycisku widać że dodaje się element listy z wartością po czym znika w czym tkwi problem HELP.

kod funkcji:

function addItem() {
    var taskValue = document.getElementById("textTask").value;
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode("- " + taskValue));
    ul.appendChild(li);
    document.getElementById("input").value = "";
    li.onclick = removeItem;
}

function removeItem(e) {
    e.target.parentElement.removeChild(e.target);
}

var addBtn = document.getElementById("addTaskBtn");
addBtn.onclick = function (e) {
    addItem();
};

KOD html

 <section>
        <form>
            <input type="text" id="textTask" placeholder="Wprowadź treść zadania do wykonania">
            <button id="addTaskBtn"> + </button>
        </form>
        <div id="listTask">
            <h2>Lista zadań do zrealizowania</h2>
            <div id=task>
                <ul id="list"></ul>
            </div>
        </div>

    </section>

 

Answer 1

var taskValue = document.getElementById("textTask").value;

Pobierając value tracisz referencje do inputa i pobierasz go drugi raz.

 document.getElementById("input").value = "";

Pobierz raz input i korzystaj z referencji do niego. 

li.onclick = removeItem;

Ten kod nic nie robi ponieważ po wywołaniu funkcji przestaje istnieć i nie masz do niego dostępu.

onclick to malo elestyczna wlaściwość, lepiej korzystać z addEventListener

Twoje itemy znikają ponieważ strona się przeładowuje po kliknięciu. Zrezygnuj z formularza albo użyj preventDefault()

Comments

function addItem() {
    var taskValue = document.getElementById("textTask");
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode("- " + taskValue.value));
    ul.appendChild(li);
    //    taskValue.value = "";
    alert(taskValue.value);
}

function removeItem(e) {
    e.target.parentElement.removeChild(e.target);
}

var addBtn = document.getElementById("addTaskBtn");
addBtn.addEventListener("click,", function (e) {
    addItem();
});

Zmieniłem onclick na addEventListener oraz to że w funkcji przypisuje referencje do zmiennej taskValue i pożniej odwołuję sie do taskValue.value jednak to nie rozwiązuje mojego problemu ze znikającym elementem Li po wykonaniu się funkcji :(

---

uzupełniłem odpowiedź

---

Dodaj e.preventDefault() tak jak radzi kolega wyżej, do listenera addBtn.

---

pablop76 dzięki wielkie. Jesteś moim Guru :)