HTML/CSS - Calculator v3 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=true" />
        <link rel="stylesheet" href="calc.css" type="text/css">
        <script type="text/javascript" src="calc.js"></script>
    </head>
    <body>
    <div class="container">
    <h2><u>Scientific Calculator</u></h2>
    <details>
         <summary>Click here for help</summary>
         <p><br>I deactived the brackets, --> "(" and ")", because I have not made them work with the scientific part of the calculator.<br></p>
    </details>
    <div class="div">
        <table><caption><pre>Calculator      by Gaurab Dhakal</bsp></caption>
            <tr>
                <td colspan="5"><div id="display-container"><div id="display1"><small><small><span></span></small></small></div><div id="h1"><small><small><span></span></small></small></div></div></td>
            </tr>
            
            <tr>
                <td><button class="top" onclick='getElementById("h1").innerHTML = bsp()'>Del</button></td>   
                <td><button class="top" onclick='getElementById("h1").innerHTML = mp()'>M+</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = mr()'>MR</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("rand")'><small>Rnd</small></button></td>
                <td rowspan="2"><button id="c" class="top" onclick='getElementById("h1").innerHTML = c("")'>C</button></td>

css

.container {
    width: 300px;
    padding:0px 10px;
    margin: 0px auto;
}
pre{
    margin: 0px;
    font-size: 12px;
}
h2 {
    color:  #89a;
    width: 300px;
    text-align: center;
}
.red {
    color:  #678;
}
table {
    margin: 0px 5px 5px 5px;
}
caption{
    color:  #abc;
    text-shadow: 2px 1px  gray;
    font-weight: bold;
}
button {
    width: 50px; 
    height: 50px; 

var decimalPoint = enter = entered = operatorSign = rootNpower_Sign = flo = math = M = firstI = first = second = secondI = answer = theanswer = result = peSign = "";
var opsCheck = dotCounter = 0;
var removeFirstZero = "";
//To prevent printing more than one dot
function dot(b) {
    if (decimalPoint == "") {
        enter = entered = b;
        first+= enter;
        entered+= enter;
        decimalPoint = ".";
        dotCounter = 0;
        return first;
        } else {
        return first;
    }
}
//To control what happen when Pi and Euler is clicked
function PE(b) {
    decimalPoint = ".";
    dotCounter = 15;
    var cons = b;
    if (peSign == "") {
        if (operatorSign != "" && first == "" + operatorSign) {
            first = (cons = "PI") ? Math.PI: Math.E;
        } else if (operatorSign != "" && first > 0 || first < 0) {
            first = (cons == "PI") ? first + "*" + Math.PI: first + "*" + Math.E;
        } else if (first != "" && operatorSign != "") {
            first += (cons = "PI") ? Math.PI: Math.E;

BROWSER

Console