aggiungendo un risultato di un calcolo a uno span con javascript dopo aver fatto clic su un pulsante

Ciao Sono nuovo di javascript e vorrei che mi aiutassi a capire perché non riesco a ottenere il risultato del generatore di numeri casuali su appaiono nel tag span dopo che l'utente fa clic su un pulsante di calcolo utilizzando il numero minimo e massimo inseriti. Credo che non ci sia nulla di sbagliato nella funzione di numeri casuali, è solo quando voglio usare la funzione numero casuale come gestore di eventi per l'evento onclick per il pulsante che non funziona. beh, quello che ho fatto è stato, ho creato una funzione chiamata answer per raccogliere gli input degli utenti e utilizzare quell'input come parametro per la funzione di numero casuale che viene chiamata all'interno della funzione di risposta.aggiungendo un risultato di un calcolo a uno span con javascript dopo aver fatto clic su un pulsante

Quindi ho usato la funzione di risposta come gestore di eventi per il onclick pensando che avrebbe avuto il risultato del generatore di numeri casuali e avrebbe applicato tale messaggio al onclick. e l'ho memorizzato in var chiamato storage in modo da poter inserire il risultato dell'evento nel tag span in seguito.

Ecco il js fiddle del codice. puoi aiutarmi a risolvere il mio problema ottenendo il risultato della funzione random_number nello span $ ("output") dopo che il pulsante $ ("calcola") clicca?

solo javascript puro, nessuna jquery per favore.

Grazie in anticipo per il vostro aiuto. e mi dispiace se ho sbagliato la terminologia e la cattiva sillabazione. http://jsfiddle.net/jack2ky/WDyMd/

 <label for="min">Enter the min:</label> 
    <input type="text" id = "min" /> <br /> 

    <label for="max">Enter the max:</label> 
    <input type="text" id = "max" /> <br /> 

    <input type="button" id = "calculate" value = "calculate"/> 
    <span id ="output">&nbsp;</span> 
<script> 

    var $ = function(id){ 
     return document.getElementById(id); 
    } 
window.onload = function() { 


    var random_number = function(min, max, digits){ 
     digits = isNaN(digits) ? 0 : parseInt(digits); 

     if(digits < 0){ 
      digits = 0; 
     }else if (digits > 16){ 
      digits = 16 
     } 
     if(digits == 0){ 
      return Math.floor(Math.random() * (max - min +1)) +min; 
     }else { 
      var rand = Math.random() * (max - min) + min; 
      return parseFloat(rand.toFixed(digits)); 
     } 
    } 


    var storage = $("calculate").onclick = answer; 

    var answer = function(){ 
      var miny = $("min").value; 
      var maxy = $("max").value; 
      return random_number(miny, maxy); 
    } 
    $("output").firstChild.nodeValue = storage; 

} 

</script> 

</body> 
</html>

fonte

2013-07-29 jack blank

var storage = $("calculate").onclick = answer; 
... 
$("output").firstChild.nodeValue = storage;

Queste due istruzioni vengono richiamate al caricamento della pagina. Quello che sta succedendo è che stai cambiando il valore della variabile storage ma l'istruzione var storage = $("calculate").onclick = answer; viene richiamata una sola volta al caricamento della pagina. È necessario aggiornare la risposta quando l'utente fa clic sul pulsante. Quindi è possibile rimuovere $("output").firstChild.nodeValue = storage; e aggiornare la funzione di risposta del tipo:

var answer = function(){    
       var miny = parseInt($("min").value);    
       var maxy = parseInt($("max").value);      
       var ans = random_number(miny, maxy);     
       $("output").innerHTML = ans; 
     }

fonte

2013-07-29 08:51:30 Konsole

Grazie per il vostro aiuto. Funziona :) Mi confondo su questo window.onload object property thing.alcune volte sono in grado di chiamare le cose nella funzione window.onload e funziona e altre volte no. Questa è una cosa che spero di risolvere nei miei progressi con l'apprendimento js. Penso di aver capito cosa hai fatto. Ma a proposito di parseInt ho pensato che un buon esempio di usare parseInt è quando un utente inserisce un numero con decimali come 198.345 lo interromperà a 198. perché in questo caso fa una differenza per il risultato emettendo 111 quando un utente mette 1-10max lasciando fuori parseInt. –

Felice di sapere che ha funzionato :). La funzione parseInt() analizza una stringa e restituisce un numero intero. Questo è necessario in questo caso perché stai ottenendo il valore minimo e massimo dalla casella di testo che viene valutata come stringa numerica per impostazione predefinita. Quindi se 'min = 5; max = 10' l'output di espressioni come 'min + max' sarà' 510' invece di '15'. Puoi usare 'parseFloat()' per analizzare i numeri in virgola mobile. Sì, puoi anche usare 'parseInt()' per tagliare il numero con decimale, ma non è l'uso effettivo di esso. – Konsole

$ ("output") firstChild.nodeValue = archiviazione.;

Questa linea sembra essere il problema perché l'elemento di output non ha firstChild. Quindi il valore non viene scritto da nessuna parte.

Basta usare

> $("output").nodeValue = storage;

edit: testato questo in jsFiddle - questo non è la soluzione, come indicato qui di seguito!

fonte

2013-07-29 08:22:34

Grazie per la risposta, ma non sembra lavoro. quando l'utente inserisce un minimo e un massimo il numero casuale all'interno di tale intervallo dovrebbe apparire sotto nel tag span dopo il clic. provato a sbarazzarsi di .firstChild ma ancora non funziona. –

Al momento non ho il tempo di testare ulteriormente - ma guarderò di nuovo quando sono a casa e testarlo se nessun altro risponde. –

se siete in grado di ottenere il vostro valore nella memoria variabile

allora si può semplicemente rendere questo valore nel lasso come HTML

$("#output span").html = storage;

fonte

2013-07-29 08:53:44 Rex

L'op ha chiesto javascript puro; nessun jquery. – Tom

Questo dovrebbe farlo:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
      var $ = function(id){ 
       return document.getElementById(id); 
      } 
      window.onload = function() { 
       var random_number = function(min, max, digits){ 
        digits = isNaN(digits) ? 0 : parseInt(digits); 

        if(digits < 0){ 
         digits = 0; 
        }else if (digits > 16){ 
         digits = 16 
        } 
        if(digits == 0){ 
         return Math.floor(Math.random() * (max - min +1)) +min; 
        }else { 
         var rand = Math.random() * (max - min) + min; 
         return parseFloat(rand.toFixed(digits)); 
        } 
       } 
       $("calculate").onclick = function() { 
        var miny = $("min").value; 
        var maxy = $("max").value; 
        $("output").firstChild.nodeValue = random_number(miny, maxy); 
       } 
      } 
    </script> 
</head> 
<body> 
     <label for="min">Enter the min:</label> 
    <input type="text" id = "min" /> <br /> 

    <label for="max">Enter the max:</label> 
    <input type="text" id = "max" /> <br /> 

    <input type="button" id = "calculate" value = "calculate"/> 
    <span id ="output">&nbsp;</span> 
</body> 
</html>

fonte

2013-07-29 09:02:37 Tom

Grazie per il vostro aiuto. –

aggiungendo un risultato di un calcolo a uno span con javascript dopo aver fatto clic su un pulsante

risposta

Problemi correlati