Visualizzazione dei risultati da 1 a 3 su 3

Discussione: oggetto event

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    174

    oggetto event

    Sto rivedendo alcuni concetti di JavaScript sulle lezioni <html>.it; nella lezione 70 intitolata "L'oggetto event e this" è riportato questo esempio:

    codice:
    <!doctype html>
    <html>
    <body>
    <input type="button" id="btn1" value="bottone1"><br>
    <input type="button" id="btn2" value="bottone2"><br>
    <input type="button" id="btn3" value="bottone3"><br>
    <input type="button" id="btn4" value="bottone4"><br>
    <script>
    var buttons = document.getElementsByTagName("button");
    var handler = function(e) { console.log("Clic su " + e.target.innerHTML); };
    for(var i = 0; i < buttons.length; i++) {
    	buttons[i].addEventListener("click", handler);
    }
    </script>
    </body>
    </html>
    dove si assegna un unico gestore di evento click a tutti i pulsanti della pagina e si vuole sapere quale pulsante è stato cliccato. Al gestore di evento viene passato come parametro l'oggetto event e viene usata la proprietà target.
    Non capisco perché il programma, una volta lanciato, non evidenzia il pulsante cliccato, anche se non viene rilevato nessun errore e nessun problema.
    Desidererei sapere, se possibile, perchè. Grazie

    lanvoel

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    162
    innerHTML non è appropriata in questo contesto:

    codice:
    <!doctype html>
    <html lang="en">
    
    <head>
        <title>test</title>
    </head>
    
    <body>
        <input type="button" class="btn" value="bottone1"><br>
        <input type="button" class="btn" value="bottone2"><br>
        <input type="button" class="btn" value="bottone3"><br>
        <input type="button" class="btn" value="bottone4"><br>
    
        <script>
            const buttons = document.getElementsByClassName("btn");
            const handler = e => { console.log("Clic su " + e.target.value) };
            
        // "for ... of" method
            // for (button of buttons) {
            //     button.addEventListener("click", handler);
            // }
            
        // "forEach" method
            Array.from(buttons).forEach(e => {
                e.addEventListener("click", handler);
            })
        </script>
    </body>
    
    </html>

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    174
    Grazie ninja72, anche per la tempestività

    lanvoel

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.