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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -