Below is a demo of a js calculator
function myScript(){
var myScript="<script>" ;
myScript += "function display(val) {" ;
myScript += "document.getElementById('textval').value += val" ;
myScript += " }";
myScript += " function eval1() {";
myScript += " let x = document.getElementById('textval').value";
myScript += " let y = eval(x)";
myScript += " document.getElementById('textval').value = y";
myScript += "}";
myScript += "function clr() {";
myScript += "document.getElementById('textval').value = ''";
myScript += "}";
myScript += "</script>";
return "<script>" + myScript + "</script>" ;
}
// defining our calculator function
function myCalc() {
// HTML Body of Table is build as a series of concatenations (+=)
var body = "";
var script=myScript();
// making a header
body += "<p>Calculator</p>";
body += "<div>A JS Calculator</div>";
body += "<table border='1'>";
body += "<tr>";
body += "<td><input type='button' style='background-color:red;color: white;' value='c' onclick='clr()' /> </td>";
body += "<td colspan='3'><input type='text' style='background-color:blue;color: white;' id='textval' /></td>";
body += "</tr>";
body += "<tr>";
body += "<td><input type='button' style='background-color:red;color: white;' value='+' onclick='display('+')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='1' onclick='display('1')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='2' onclick='display('2')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='3' onclick='display('3')' /> </td>";
body += "</tr>";
body += "<tr>";
body += "<td><input type='button' style='background-color:red;color: white;' value='-' onclick='display('-')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='4' onclick='display('4')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='5' onclick='display('5')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='6' onclick='display('6')' /> </td>";
body += "</tr>";
body += "<tr>";
body += "<td><input type='button' style='background-color:red;color: white;' value='*' onclick='display('*')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='7' onclick='display('7')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='8' onclick='display('8')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='9' onclick='display('9')' /> </td>";
body += "</tr>";
body += "<tr>";
body += "<td><input type='button' style='background-color:red;color: white;' value='/' onclick='display('/')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='.' onclick='display('.')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='0' onclick='display('0')' /> </td>";
body += "<td><input type='button' style='background-color:red;color: white;' value='=' onclick='eval1()' /> </td>";
body += "</tr>";
body += "</table>";
// Build and HTML fragment of div, table, table body
return (
"<script>" + script + "</script>" +
"<div>" +
"<table>" +
body +
"</table>" +
"</div>"
);
};
$$.html(myCalc());