Impostare attributo "onclick"

samurai.sette

Utente Attivo
17 Dic 2015
232
6
18
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

Utente Attivo
28 Nov 2014
179
28
28
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

Utente Attivo
17 Dic 2015
232
6
18
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

Utente Attivo
6 Giu 2018
511
50
28
17
Bassano del Grappa (VI)
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

Utente Attivo
28 Nov 2014
179
28
28
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

Utente Attivo
17 Dic 2015
232
6
18
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!