Menu
I am making a jquery calculator, where by clicking on buttons that represent the numbers and operators on a calculator, the display's innerHTML would change to reflect the buttons clicked.
Below is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<title> JQuery Calculator </title>
</head>
<body>
<style>
section {
padding: 2em;
}
.display {
height: 5em;
color: #333;
}
</style>
<section id="calculator">
<div class="display">
</div>
<div id="numbersContainer">
<table id="numbers">
<tr>
<td>
<button class="number" id="one">1</button>
</td>
<td>
<button class="number" id="two">2</button>
</td>
<td>
<button class="number" id="three">3</button>
</td>
</tr>
<tr>
<td>
<button class="number" id="four">4</button>
</td>
<td>
<button class="number" id="five">5</button>
</td>
<td>
<button class="number" id="six">6</button>
</td>
</tr>
<tr>
<td>
<button class="number" id="seven">7</button>
</td>
<td>
<button class="number" id="eight">8</button>
</td>
<td>
<button class="number" id="nine">9</button>
</td>
</tr>
<tr>
<td>
<button class="number" id="zero">0</button>
</td>
</tr>
</table>
<table id="operators">
<tr>
<td>
<button class="operator" id="plus">+</button>
</td>
<td>
<button class="operator" id="minus">-</button>
</td>
</tr>
<tr>
<td>
<button class="operator" id="divide">/</button>
</td>
<td>
<button class="operator" id="times">x</button>
</td>
</tr>
</table>
</div>
</section>
<script>
var storedCalculation;
$('.number, .operator').click( function() {
var numberOrOperator = event.target.innerHTML;
storedCalculation+=numberOrOperator;
});
var calcScreen = $('.display').innerHTML;
calcScreen = storedCalculation;
</script>
</body>
</html>
and here is the jsfiddle of it: http://jsfiddle.net/ynf2qvqw/
Why is the innerHTML of the display class not changing?
600
http://jsfiddle.net/blaird/ynf2qvqw/2/
var storedCalculation = '';
$('.number, .operator').click(function () {
var numberOrOperator = $(this).html();
storedCalculation += numberOrOperator;
$('.display').html(storedCalculation);
});
You are using innerHTML incorrectly and you are trying to set your value outside of your click function.
73
jQuery objects do not have an innerHTML property like native JavaScript HTMLElements. In order to modify a jQuery object's inner HTML, you must use the html() method, like so:
$('.display').html(storedCalculation);
See http://api.jquery.com/html/ for more information.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
