S2JS - Javascript interacting with HTML : Handling clear

Handling the Clear button is very straightforward.

It simply sets the display to empty, and resets the running result variable.

function DoClear() { numdisplay.innerText = ""; running_result = ""; }

<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 DoClear() { numdisplay.innerText = ""; running_result = ""; } function PressNumberButton (n) { numdisplay.innerText += n; } </script> </body> </html>