Impostare attributo "onclick"

samurai.sette

Utente Attivo
17 Dic 2015
235
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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
235
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
616
58
28
20
Vicenza
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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
235
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Come impostare dimensioni percentuali corrette? HTML e CSS 3
S impostare un testo e una img nella stessa riga con jsPDF Javascript 0
K Impostare scala di proporzione (Indesign) Webdesign e Grafica 0
G Impostare suggerimenti campo text di un form Javascript 2
K [MySQL] Impostare Database MySQL 2
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
Cosina [PHP] Impostare colore singolo elemento in fwrite PHP 2
P impostare due Vlan su router - dhcp su seconda sottorete e statico su prima Reti LAN e Wireless 0
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
D Consiglio su come impostare IP statico Reti LAN e Wireless 0
G [PHP] composer: impostare l'autoloading più facilmente PHP 0
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
Trapano [PHP] come impostare un if else PHP 10
M [Photoshop] impossibile impostare Profilo colori Photoshop 1
booklisa [PHP] Impostare constanti nelle url PHP 7
ANDREA20 [PHP] Non riesco ad impostare reset password invio via email PHP 6
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
A impostare una query con operatori condizionali MySQL 1
LuigiDonato Come Impostare Tabelle MySQL 2
R Problema impostare valore textbox MS Access 0
D Select concatenate impostare di default dato memorizzato Javascript 4
M Consiglio su come impostare intervista conoscitiva con cliente per sito ad un gruppo musicale. Discussioni Varie 3
M Impostare sfondo Sviluppo app per Android 1
F [RISOLTO]js function per impostare minimo totale Javascript 8
Emix [RISOLTO]Impostare focus su textbox dopo foreach jQuery 16
A impostare la posizione iniziale di un blocco Javascript 0
giancadeejay Impostare tempo per vedere un immagine nell'array. Javascript 2
A hover impostare bordo HTML e CSS 9
B Impostare cartella temporaea immagine Javascript 1
B Impostare permessi su XAMPP Apache 0
N Impostare il tempo jQuery 5
T Impostare un controllo da database, di dati immessi in un form asp Classic ASP 6
T impostare il controllo dei dati immessi dagli utenti su form asp Classic ASP 8
G Come impostare il formato data per mysql MySQL 11
nim Impostare gli area tag HTML e CSS 3
S Come posso impostare a grandi linee questa tabella? PHP 8
P impostare e salvare impaginazione sito PHP 0
A Impostare tabelle per forum e codice php PHP 6
S Come impostare campi non obbligatori php PHP 5
SolidSnake4 impostare htaccess su aruba Hosting 1
A impostare un immagine con css HTML e CSS 17
H Creare una pagina che si collega a keepvid. come impostare il form? HTML e CSS 3
B Impostare un DIV in primo piano e un'altro DIV in secondo piano HTML e CSS 2
B impostare media player 11 Windows e Software 3
B impostare una pagina coi css HTML e CSS 1
G chido aiuto per impostare rete wifi Reti LAN e Wireless 0
S [VB.NET 2005 Express] Impostare una variabile Programmazione 0
Y impostare excel PHP 0
S impostare la index page HTML e CSS 3
D Impostare Invio Email HTML e CSS 3

Discussioni simili