Activity 2
<!DOCTYPE html>
<html> <head> <style> div { position:inline; border: 2px solid #dedede; width:200px; background-color: #f1f1f1; border-radius: 5px; padding: 50px; margin: 50px 500px; } body{background-color:gray;} </style> </head> <body> <div> <h1> Math Operations </h1> <input type="number" id="n1" placeholder=" Enter a number " /> <br><br> <input type="number" id="n2" placeholder=" Enter a number " /> <br><br> <label id = "label" value ="Answer" ></label> <br><br> <input type="number" id="answer" disabled/> <br><br> <input type="button" id = "getSum" value=" + " onclick = "getSum()" /> <input type="button" id = "getDifference" value=" - " onclick = "getDifference()" /> <input type="button" id = "getRemainder" value=" % " onclick = "getRemainder()" /> <input type="button" id = "getExponent" value=" ** " onclick = "getExponent()" /> <input type="button" id = "clears" value=" C " onclick = "clears()" /> <hr /> </div> <label id = "label"></label> <script> function getSum() { var n1 = Number(document.getElementById("n1").value); var n2 = Number(document.getElementById("n2").value); var answer = document.getElementById("answer"); var sum ; var label = document.getElementById("label"); label.innerHTML="Sum"; sum=n1+n2; answer.value= sum; } function clears() { document.getElementById("n1").value=""; document.getElementById("n2").value=""; document.getElementById("answer").value=""; var label = document.getElementById("label"); label.innerHTML="Answer"; } </script> </body> </html>
Comments
Post a Comment