S2JS - Javascript interacting with HTML : Getting ready for the Javascript

Now we get ready for the Javascript

We assign an id (called numdisplay) to the div where we're going to display results, so we can manipulate the contents of the div
Add onclick handlers to all the number buttons, calling the function PressNumberButton (which we haven't written yet)
Likewise add onclick handlers to the operation buttons, calling PressOperator
Note that where we pass a string value to the function, we enclose the string in single quotes (because the onclick string is already in double quotes)
Add an onclick handler for the Clear button

Obviously it won't do anything useful yet — clicking any of the buttons will complain about functions being undefined.

<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> </body> </html>