S2JS - Javascript interacting with HTML : Handling the numbers

Now we define the PressNumberButton function.

This will simply make another digit appear on the calculator display.

We gave our readout div an id of numdisplay. We can use the Javascript += operator to perform a string concatenation (join) of the new digit onto whatever is already there. We use the innerText property of the div.

function PressNumberButton (n) { numdisplay.innerText += n; }

Try clicking a number button.

<HTML> <title> My Calculator </title> <body> <style> .MyCalculator {width:240px; padding:10px; text-align:center; background-color:tan} button {margin-top:5px; font-size:150%; border-width:3px} button:active {border-style: inset} .NumBtn {width: 20%} .OpBtn {width:30%; color:red} .readout {width: 100%; height:1.3em; background-color:DarkSlateGrey; text-align:right; color:lawngreen; font-size:300%; font-family: monospace; font-weight:bold} </style> <div class="MyCalculator"> <div id=numdisplay class="readout">1234</div> <button class="NumBtn" onclick="PressNumberButton(1)">1</button> <button class="NumBtn" onclick="PressNumberButton(2)">2</button> <button class="NumBtn" onclick="PressNumberButton(3)">3</button> <br> <button class="NumBtn" onclick="PressNumberButton(4)">4</button> <button class="NumBtn" onclick="PressNumberButton(5)">5</button> <button class="NumBtn" onclick="PressNumberButton(6)">6</button> <br> <button class="NumBtn" onclick="PressNumberButton(7)">7</button> <button class="NumBtn" onclick="PressNumberButton(8)">8</button> <button class="NumBtn" onclick="PressNumberButton(9)">9</button> <br> <button class="NumBtn" onclick="PressNumberButton(0)">0</button> <button class="NumBtn" onclick="PressNumberButton('.')">.</button> <br> <hr> <button class="OpBtn" onclick="PressOperator('+')">+</button> <button class="OpBtn" onclick="PressOperator('*')">*</button> <button class="OpBtn" onclick="DoClear()">CLR</button> <br> <button class="OpBtn" onclick="PressOperator('-')">-</button> <button class="OpBtn" onclick="PressOperator('/')">/</button> <button class="OpBtn" onclick="PressOperator('=')">=</button> </div> <script> var running_result = 0; var prev_op = "="; function PressNumberButton (n) { numdisplay.innerText += n; } </script> </body> </html>