PROBLEMA Al click sul bottone mi esegue un elemento infinite volte

Pubblicità
maxbraian

maxbraian

Nuovo Utente
Messaggi
10
Reazioni
0
Punteggio
25
Buonasera a tutti, mi sto avvicinando alla programmazione in JS e oggi stavo creando un semplicissimo giochino.
In questo gioco prima di tutto bisognava specificare la difficoltà ed in base a quest'ultima caricava delle tabelle.
Il problema è che se riclicco il bottone, cambiando difficoltà, mi carica un'altra tabella rompendo tutto l'HTML.
Vorrei un modo che al click del bottone, se c'è un elemento già caricato lo cancelli e ne carichi un altro, altrimenti lo carica solo.
Scusatemi ma sto impazzendo, programmo da neanche un mese forse sarà una cosa facilissima ma vi sono grato se potreste aiutarmi a trovare una soluzione.
 
Posta il codice sotto il tag codice è forse possiamo darti una mano
 
JavaScript: 
function play(){
    difficoltà = document.getElementById('difficult').value;

    switch(difficoltà) {
        case 'easy':
            easy();
            break;
        case 'medium':
            medium();
            break;
        case 'hard':
            hard();
        default:
    }
}

function easy(){

    for( let i=1; i <= 100; i++){
        box = document.createElement('div');
        box.classList.add('box');
        box.classList.add('box-easy');
        document.querySelector('.grid').appendChild(box);
        box.innerHTML= i;
    }
    return box
}
function medium(){

    for( let i=1; i <= 81; i++){
        box = document.createElement('div');
        box.classList.add('box');
        box.classList.add('box-medium');
        document.querySelector('.grid').appendChild(box);
        box.innerHTML= i
    }
    return box
}
function hard(){

    for( let i=1; i <= 49; i++){
        box = document.createElement('div');
        box.classList.add('box');
        box.classList.add('box-hard');
        document.querySelector('.grid').appendChild(box);
        box.innerHTML= i
    }
    return box
}

HTML: 
<body>
    <header>
        <div class="container-header">
            <img src="https://cdn2.steamgriddb.com/file/sgdb-cdn/logo/a79c879d28c5c8a4707d52bbaa57607f.png" alt="Logo" width="160px" height="60">
            <div>
                <label for="">Livello:</label>
                <select name="Difficoltà" id="difficult">
                    <option value="easy">Facile</option>
                    <option value="medium">Medio</option>
                    <option value="hard">Difficile</option>
                </select>
                <button onclick="play()">Gioca</button>
            </div>
        </div>
    </header>

    <main>
        <div class="container">
            <div class="grid">
                
            </div>
        </div>
    </main>
 
Prima di fare ciò che fai dovresti cancellare il div e ricrearlo. Oppure pulirlo e ripopolarlo

Ma vedo che tu fai un create quindi basterebbe rimuoverlo e ricrearlo
 
Come crei elementi li puoi anche eliminare prima di caricarne degli altri. Li hai etichettati per classe, eliminali per classe.

stackoverflow.com

Removing elements by class name

I have the code below to find elements with their class name: // Get the element by their class name var cur_columns = document.getElementsByClassName('column'); // Now remove them for (var i = 0...
stackoverflow.com stackoverflow.com
 
Pubblicità
Pubblicità
Indietro
Top