Perché la mia variabile non viene visualizzata in TextBox utilizzando Jquery?

ho un piccolo problema qui. im costruendo una calcolatrice e im lavoro sull'idea generale su di esso e im confuso su perché il mio charlie variabile non apparirà nella casella di text di output. Tutte le variables sono corrette alla fine (li ho controllati con la function di allarme) ma alla fine sembra che proprio non si presenta! Qualsiasi aiuto sarebbe apprezzato!

<!DOCTYPE html> <body> <div id="content"> <form name="calc"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script id="NumberButtons"> $(document).ready(function(){ $('#button1').click(function(){ $('#output').val($(this).val()); }); $('#button2').click(function(){ $('#output').val($(this).val()); }); $('#button3').click(function(){ $('#output').val($(this).val()); }); $('#button4').click(function(){ $('#output').val($(this).val()); }); $('#button5').click(function(){ $('#output').val($(this).val()); }); $('#button6').click(function(){ $('#output').val($(this).val()); }); $('#button7').click(function(){ $('#output').val($(this).val()); }); $('#button8').click(function(){ $('#output').val($(this).val()); }); $('#button9').click(function(){ $('#output').val($(this).val()); }); $('#button0').click(function(){ $('#output').val($(this).val()); }); $('#buttonclear').click(function(){ $('#output').val($(this).val()); }); }); </script> <script id="MathSymbolButtons"> var alpha = 0; var bravo = 0; var charlie = 0; $(document).ready(function(){ $('#buttonplus').click(function(){ var alpha = $("#output").val(); window.alert(alpha) }); $('#buttonequals').click(function(){ var bravo = $("#output").val(); window.alert(bravo) var charlie = alpha + bravo; $('#output').val($(charlie).val()); }); }); </script> <table> <tr> <td> <input type="text" id="output"> <br> </td> </tr> <tr> <td> <input type="button" name="one" value = "1" id="button1"> <input type = "button" name = "two" value = "2" id="button2" > <input type = "button" name = "three" value = "3" id="button3"> <input type = "button" name = "four" value = "4"id="button4"> <input type = "button" name = "five" value = "5" id="button5"> <input type = "button" name = "six" value = "6" id="button6"> <input type = "button" name = "seven" value = "7" id="button7"> <input type = "button" name = "eight" value = "8" id="button8"> <input type = "button" name = "nine" value = "9" id="button9"> <input type = "button" name = "zero" value = "0" id="button0"> <input type = "button" name = "add" value = "+" id="buttonplus"> <input type = "button" name = "evaluate" value = " = " id="buttonequals"> <br> </td> </tr> </table> </form> </div> </body> </html> 

Ecco il codice corrente:

 var alpha = 0; var bravo = 0; var charlie = 0; $('#buttonplus').click(function(){ var alpha = $("#output").val(); }); $('#buttonequals').click(function(){ var bravo = $("#output").val(); var charlie = alpha + bravo; $('#output').val($(charlie).val()); }); 

Queste sono variables globali:

 var alpha = 0; var bravo = 0; var charlie = 0; 

Ma stai creando nuove variables locali all'interno dei gestori di click :

 $('#buttonplus').click(function(){ var alpha = $("#output").val(); }); 

Rimuovere var per accedere alle variables globali invece:

 $('#buttonplus').click(function(){ alpha = $("#output").val(); }); 

Questo codice assegna la rappresentazione di string di #output in alpha:

 alpha = $("#output").val(); 

Se alpha è 2 e bravo è 3, allora alpha + bravo sarebbe 23 .

Puoi costringerla a un numero preimpostando un segno più:

 alpha = +$("#output").val(); 

Infine, invece di questo:

  $('#output').val($(charlie).val()); 

… Fai questo:

  $('#output').val(charlie); 

Codice corretto:

 var alpha = 0; var bravo = 0; var charlie = 0; $('#buttonplus').click(function(){ alpha = +$("#output").val(); }); $('#buttonequals').click(function(){ bravo = +$("#output").val(); charlie = alpha + bravo; $('#output').val(charlie); }); 

charlie non è un elemento, è una variabile, quindi:

 $('#output').val(charlie); 

o nativamente:

 document.getElementById( 'output' ).value = charlie; 

in primo luogo $().val() viene utilizzato per estrarre il valore di un elemento di documento (ad esempio una casella di text), ma le vostre variables charlie sono già una string, quindi non ha senso fare $(charlie).val()

in secondo luogo, poiché sono stringhe, alpha + bravo li concatenerà in questo caso, 2 + 3 saranno 23 invece di 5, per riassumere correttamente, devi convertirli in ints con parseInt(alpha) o alpha * 1

al terzo posto, in javascript, le vostre variables sono funzionalizzate, vale a dire se lo fai

 $('#buttonplus').click(function(){ var alpha = $("#output").val(); }); 

la tua alpha variabile esisterà solo all'interno di quella function, se vuoi accedervi dall'esterno, devi fare

 var alpha; $('#buttonplus').click(function(){ alpha = $("#output").val(); }); 

altrimenti l'alfa sarà indefinita

un'ultima nota è per favore non ommetti var, il seguente codice funziona ma è una pratica terribile

 $('#buttonplus').click(function(){ alpha = $("#output").val(); }); 

in questo caso, alpha è una variabile globale e se la tua pagina è composta da più file che alpha sarà definito anche negli altri file e può anche colidare un'altra variabile alfa in un altro file!

quindi ecco un violino lavorativo di quello che ho appena detto

http://jsfiddle.net/hxvjhsxd/

C'erano molti problemi:

Ecco un jsFiddle funzionante: http://jsfiddle.net/khsm7s0s/

Hai dichiarato diverse variables due volte. È necessario forzare le stringhe per essere numbers in modo da poterli aggiungere. Hai trattato il charlie come elemento DOM inserendo un wrapper jQuery su di esso.

 var alpha = 0; var bravo = 0; var charlie = 0; $(document).ready(function () { $('#buttonplus').click(function () { alpha = $("#output").val(); }); $('#buttonequals').click(function () { bravo = $("#output").val(); charlie = Number(alpha) + Number(bravo); $('#output').val(charlie); }); }); 
  1. 'var' in function crea nuove variables locali, non influenzerà quello globale
  2. u non può aggiungere due stringhe, get il numero per string * 1
  3. $ ('# output') .val (charlie) per impostare il valore

prova questo:

 $('#buttonplus').click(function(){ alpha = $("#output").val(); //window.alert(alpha) }); $('#buttonequals').click(function(){ bravo = $("#output").val(); //window.alert(bravo) charlie = alpha * 1 + bravo * 1; $('#output').val(charlie); });