javascript - Why wont My Variable Appear In The TextBox Using Jquery? -
i having little trouble here. im building calculator , im working on general idea on , im confused on why variable charlie not appear in output text box. variables correct in end ( checked them alert function) in end seems wont show up! appreciated!
<!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>
here current code:
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()); });
these global variables:
var alpha = 0; var bravo = 0; var charlie = 0;
but you're creating new local variables within click
handlers:
$('#buttonplus').click(function(){ var alpha = $("#output").val(); });
remove var
access global variables instead:
$('#buttonplus').click(function(){ alpha = $("#output").val(); });
code assigns string representation of
#output
alpha: alpha = $("#output").val();
if alpha
2 , bravo
3, alpha + bravo
23
.
you can coerce number prepending plus sign:
alpha = +$("#output").val();
finally, instead of this:
$('#output').val($(charlie).val());
… this:
$('#output').val(charlie);
corrected code:
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); });
Comments
Post a Comment