[zielonzielon]

#programowanie #javascript

Przy takim zapisie po kliknięciu buttona tworzy się od razu 7 divów z zawartością inputa. Jak zrobić tak, żeby za każdym kliknieciem robił się jeden div aż do 7, a pole input sie czyscilo? Dopiero się uczę.

[wyrwishmat]

ja bym zrobił tak:

document.getElementById("myButton").onclick = function add() {
 const name = document.getElementById("myText").value;
 const div = document.createElement("div");
 div.innerHTML = name;
 if (document.getElementsByTagName('div').length < 7) {
 document.body.appendChild(div);
 }
}

ale pokombinowałbym, żeby nadać temu pojawiającemu się divowi jakiś attribute, żeby nie szukało wszystkich na stronie

[TheBloody]

@zielonzielon Na szybko, wcale nie potrzebujesz pętli, tyko IFA który sprawdza czy nie ma już więcej niż 7 elementów

[zielonzielon]

@TheBloody: @wyrwishmat: Działa świetnie, wielkie dzięki koledzy i miłego wieczoru

[Norman2]

@zielonzielon: staram się nie używać innerHTML jeśli mam do czynienia z inputem o nieznanej wartości. Wpisz sobie w swojego inputa to : ![](nonoexisting) i zobacz co się stanie. Pomimo zabezpieczenia innerHTML przed wykonywaniem skryptów - jak widzisz da się coś 'wstrzyknąć'. Lepiej użyć innerText albo zamienić < na < używając u Ciebie div.innerHTML = name.replace('<', '<') co zepsuje kod HTML ale umożliwi wyświetlenie go jako kod HTML.

[Norman2]

@zielonzielon: druga sprawa - jeśli używasz funkcji add() tylko jako onClick na DOMie to nie ma sensu jej nazywać. Skorzystaj z dobra ES6 i zamień to na funkcję strzałkową document.getElementById("myButton").onclick = () => { tutaj ten kod; }" Fajniej też kod wygląda jak do dodawania takich onClicków używasz addEventListener'a

[zielonzielon]

@Norman2: Przydatne, postaram sie zastosować.