Witam. Jestem osobą początkującą w JavaScript. Przy rozwiązywaniu zadania polegającego na wylosowaniu losowych liczb natknęłam się na mały problem, dlatego też zwracam się do Was z prośbą o pomoc. W momencie, gdy po raz pierwszy klikam w button "Losuj" w tablicy wyświetlają mi się losowe liczby, następnie czyszczę tablicę klikając w button "Wyczyść" i w tym momencie chciałabym móc ponownie wywołać funkcję losującą bez odświeżania strony na nowo. Czy mogłabym liczyć na podpowiedź z Waszej strony jak uzyskać taki efekt? Korzystając z okazji, byłabym wdzięczna za podpowiedź w jaki sposób zakodować funkcję, aby jeden przycisk służący do losowania przy pierwszym kliknięciu wypisał liczby w tablicy, a przy kolejnym wywołaniu funkcji wylosował liczby na nowo. Bardzo dziękuję za pomoc :)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<button class="btn-draw">Losuj</button>
<button class="btn-remove">Wyczyść</button>
<script src="scripts.js"></script>
</body>
</html>
JavaScript:
const result = [];
const button = document.querySelector('.btn-draw');
const btnRem = document.querySelector('.btn-remove');
function draw() {
if (result.length === 6) {
return;
}
const resultDraw = Math.floor(Math.random() * 50 + 1);
for (let i = 0; i < result.length; i++) {
if (resultDraw === result[i]) {
return draw();
}
}
const div = document.createElement('div');
div.textContent = resultDraw;
result.push(resultDraw);
document.body.appendChild(div);
function removeArr() {
div.remove();
}
btnRem.addEventListener('click', removeArr);
}
button.addEventListener('click', draw);