• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dodanie elementu na strone JS

0 głosów
75 wizyt
pytanie zadane 5 marca w JavaScript, jQuery, AJAX przez cylo24 Początkujący (300 p.)

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>

 

1 odpowiedź

0 głosów
odpowiedź 5 marca przez pablop76 Szeryf (97,850 p.)
wybrane 5 marca przez cylo24
 
Najlepsza
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()

komentarz 5 marca przez cylo24 Początkujący (300 p.)
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 :(

komentarz 5 marca przez pablop76 Szeryf (97,850 p.)
uzupełniłem odpowiedź
komentarz 5 marca przez thryndl Nałogowiec (27,550 p.)
Dodaj e.preventDefault() tak jak radzi kolega wyżej, do listenera addBtn.
komentarz 5 marca przez cylo24 Początkujący (300 p.)
pablop76 dzięki wielkie. Jesteś moim Guru :)

Podobne pytania

0 głosów
4 odpowiedzi 153 wizyt
0 głosów
0 odpowiedzi 68 wizyt
pytanie zadane 10 stycznia 2018 w JavaScript, jQuery, AJAX przez Nienormalny_ Początkujący (350 p.)
0 głosów
2 odpowiedzi 94 wizyt
pytanie zadane 27 sierpnia 2018 w JavaScript, jQuery, AJAX przez bulit000 Początkujący (450 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

66,513 zapytań

113,278 odpowiedzi

239,907 komentarzy

46,647 pasjonatów

Przeglądających: 213
Pasjonatów: 19 Gości: 194

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...