Proponuje rozwiązanie z użyciem
- document.querySelector()
- document.querySelectorAll()
- element.innerHTML
- Łączenie tekstu (string) ze zmiennymi (Interpolacja stringów)
[ pełny kod przykładu on-line ]
<input type="text" id="pole-input" value="nowy div">
<button type="button" id="wykonaj-button">wykonaj</button>
<div id="kwadrat"></div>
#kwadrat {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: 1rem;
}
#kwadrat div {
width: 100px;
height: 100px;
border: 2px solid red;
}
const wykonaj_button = document.querySelector('#wykonaj-button');
wykonaj_button.addEventListener('click', utworz);
function utworz() {
const kwadrat = document.querySelector('#kwadrat');
const ile_kwadraty = kwadrat.querySelectorAll('div').length;
const MAKSYMALNA_KWADRATY = 15;
if (ile_kwadraty >= MAKSYMALNA_KWADRATY) {
alert(`Utworzyłeś maksymalną ilość kwadratów (${MAKSYMALNA_KWADRATY})`);
return;
}
const value = document.querySelector('#pole-input').value.trim();
if (value.toLowerCase() === 'nowy div') {
kwadrat.innerHTML += '<div></div>';
}
}