Impostare attributo "onclick"

samurai.sette · 1 Mag 2020

Ciao a tutti.
Come da titolo, mi chiedevo se in Javascript è possibile impostare l'attributo "on_click" quando si crea un elemento.
Ho provato in questo modo ma non funziona e mi chiedevo se qualcuno di voi poteva darmi una delucidazione in merito.
Questo è quello che ho scritto:

JavaScript:

function somma() // questa funzione deve essere richiamata nella successiva funzione
{
    var add1 = document.getElementById("input_text1").value;
    var add2 = document.getElementById("input_text2").value;
                
    var add1_number = Number(add1);
    var add2_number = Number(add2);
                        
    var totale = add1_number + add2_number;
                        
    alert(totale);
}

function funzione()
{
    var ok_somma = document.createElement("input");
    ok_somma.setAttribute('type','button');
    ok_somma.setAttribute('name','ok_somma_php');
    ok_somma.setAttribute('value','Fai la somma');
    ok_somma.setAttribute('onclick','somma()');
                
    document.body.appendChild(ok_somma);
}

Secondo voi dove sbaglio?
Ciao, grazie.

WmbertSea · 1 Mag 2020

Ciao, posso assicurarti che quella funzione sull'onclick viene eseguita regolarmente, bisogna però capire dove stai chiamando la funzione "funzione()" e se gli elementi che stai selezionando con il metodo getElementById() (nella funzione somma()) sono presenti sulla pagina nel momento in cui vai a richiamare tale funzione, altrimenti lo script va in errore.

Tra parentesi, piuttosto che impostare l'evento click con un attributo sul tag relativo all'elemento creato, in questo caso è preferibile applicare un gestore attraverso il metodo addEventListener() direttamente sull'elemento creato; non ha senso infatti "sporcare" il codice html solo per applicare un evento in quel modo.

Puoi fare una cosa del genere:
ok_somma.addEventListener("click", somma);
Il risultato è comunque uguale a come lo hai impostato tu.

samurai.sette · 1 Mag 2020

Ciao WmbertSea, grazie per la risposta.
Ti spiego esattamente come è strutturata la pagina. Inizialmente nella pagina ci sono due elementi: una input text e un bottone inseriti tramite html.

HTML:

<body>
   <input type="text" name="nome_numero" id="id_numero" />
   <input type="button" name="ok_numero" value="Inserisci gli input text" onclick="div1();" />
</body>

Inserito un valore numerico nella input text e premuto il bottone dovrebbero essere richiamate le due funzioni Javascript.
Funzione 1:

JavaScript:

function funzione1()
{
    var valore = document.getElementById("id_numero").value;
    var num_valore = Number(valore);
               
    var form = document.createElement("form");
    form.setAttribute('method',"post");
    document.body.appendChild(form);
               
    for (var a = 1; a <= num_valore; a ++)
    {
        var nomi_text = "input_text" + a;
                   
        var casella_testo = document.createElement("input");
        casella_testo.setAttribute('type','text');
        casella_testo.setAttribute('name',nomi_text);
                   
        form.appendChild(casella_testo);
    }
               
    var ok_somma = document.createElement("input");
    ok_somma.setAttribute('type','button');
    ok_somma.setAttribute('name','ok_somma_php');
    ok_somma.setAttribute('value','Fai la somma');
    ok_somma.setAttribute('onclick','somma()');
    form.appendChild(ok_somma);
}

Funzione somma:

JavaScript:

function somma()
{
    var add1 = document.getElementById("input_text1").value;
    var add2 = document.getElementById("input_text2").value;
               
    var add1_number = Number(add1);
    var add2_number = Number(add2);
                       
    var totale = add1_number + add2_number;
                       
    alert(totale);
}

Detto questo, la funzione1 funziona bene, mentre non mi funziona la funzione somma().
PS: nella funzione somma() ho ipotizzato che nella casella di testo viene inserito il valore 2.

Tommy03 · 1 Mag 2020

Visto così il tuo codice non vedo cose sbagliate... Io proverei a tenere aperta la "finestra" Ispeziona (f12) per vedere se quando clicchi il primo pulsante si creano gli input corretti
Poi quando fai la somma, vengono fuori errori?

WmbertSea · 2 Mag 2020

Ciao, noto qualche riferimento sbagliato con i nomi delle funzioni. Nel button hai messo onclick="div1();" ma poi nomini la funzione come "funzione1()". Mi sembra strano che ti possa funzionare in quel modo.

Inoltre, come già ti ho indicato, è necessario che gli elementi selezionati con getElementById() risultino presenti sulla pagina. Quando vai a creare gli input, nel ciclo della funzione1, stai usando setAttribute('name',nomi_text) che assegna un attributo nome, non un id. Dovresti invece assegnare un id.
Dovresti quindi scrivere casella_testo.setAttribute('id',nomi_text) oppure semplicemente casella_testo.id = nomi_text;.

Ad ogni modo fai attenzione perché se vai a creare runtime quegli input, ovviamente nella funzione somma() non puoi sapere con esattezza che siano stati creati "input_text1" e "input_text2". Dovresti aggiustare questo passaggio se vuoi che gli input siano selezionati in modo dinamico, così come vengono creati.

Tieni presente anche il consiglio di Tommy03, verifica sempre sulla tua console se ti saltano fuori degli errori.

samurai.sette · 2 Mag 2020

Ciao a tutti. Grazie mille per le risposte, grazie a voi ho risolto.
Il problema era nella creazione degli input in cui assegnavo soltanto un name ma quando tentavo di selezionare gli input lo facevo tramite id. Per quanto riguarda il riferimento alla funzione nel codice che ho postato ho commesso un errore...
Ciao, grazie mille!

Cerca

Cerca

Impostare attributo "onclick"

samurai.sette

Utente Attivo

WmbertSea

Moderatore

samurai.sette

Utente Attivo

Tommy03

Utente Attivo

WmbertSea

Moderatore

samurai.sette

Utente Attivo

Discussioni simili