Code working in JsBin but not any other browsers

Question

This question asked before and I read all of them, tried to implement the suggestions given but no luck. It's a calculator with basic functionality. Numbers are not displaying in the screen, operators are not working. Basically, js file is not working.

- Scope issue; Inserted js file in window.onload=function(){} .

- Tried to find bugs but code looks okay .

I linked css and js files as separate, code is working in JsBin but not any browsers.

Any suggestions:

Here are my codes:

<!DOCTYPE html>
<html>

<head>
    <title> Basic Calculator </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div id="container">
        <form name="calculator">
            <input type="text" id="display"  />
            <br>

            <input type="button" value=' CLEAR ' class="operator" onclick='clearDisplay("clear")' />
            <input type="button" value=' DEL '   class="keys" onclick='backSpace()'   />
            <input type="button" value=' + '     class="keys" onclick='passToScreen("+")' />
            <br />

            <input type="button" value=' 9 ' class="keys" onclick='passToScreen("9")' />
            <input type="button" value=' 8 ' class="keys" onclick='passToScreen("8")' />
            <input type="button" value=' 7 ' class="keys" onclick='passToScreen("7")' />
            <input type="button" value=' - ' class="keys" onclick='passToScreen("-")' />
            <br />

            <input type="button" value=' 6 ' class="keys" onclick='passToScreen("6")' />
            <input type="button" value=' 5 ' class="keys" onclick='passToScreen("5")' />
            <input type="button" value=' 4 ' class="keys" onclick='passToScreen("4")' />
            <input type="button" value=' * ' class="keys" onclick='passToScreen("*")' />
            <br />

            <input type="button" value=' 3 ' class="keys" onclick='passToScreen("3")' />
            <input type="button" value=' 2 ' class="keys" onclick='passToScreen("2")' />
            <input type="button" value=' 1 ' class="keys" onclick='passToScreen("1")' />
            <input type="button" value=' / ' class="keys" onclick='passToScreen("/")' />
            <br />

            <input type="button" value=' 0 ' class="keys" onclick='passToScreen("0")' />
            <input type="button" value=' . ' class="keys" onclick='passToScreen(".")' />
            <input type="button" value=' = ' class="operator" onclick='doMath()' />
            <br />
        </form>

    </div>


</body>
</html>

CSS code:

body {
    background-color: lightgrey;
}

#container {
    position: relative;
    width: 300px;
    height: 320px;
    border: 2px solid blue;
    border-radius: 4px;
    background-color: white;
    padding: 20px;
    margin: 50px auto;
    box-shadow: 3px 2px 2px 1px lightblue;
}

input[type=button] {
    background: lightgrey;
    width: 20%;
    font-size: 20px;
    font-weight: 900;
    font: white;
    margin: 2%;
    border-radius: 4px;
    box-shadow: 0px 0px 2px 1px black;
    outline: none;
}

#container .operator {
    width: 45%;
}

input[type=text] {
    position: relative;
    display: block;
    height: 40px;
    width: 93%;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 0px 0px 1px black;
    margin: 5px 5px -2px 5px;
    text-align: right;
    outline: none;

    font-size: 25px;
    font-weight: bold;
    padding-right: 5px;

}

JS file:

window.onload = function() {
   var screen = document.getElementById("display");

   function passToScreen(x) {
      screen.value += x;

   }

   function clearDisplay() {
     screen.value = "";
   }

   function doMath() {
     var y = screen.value;
     y = eval(y);
     screen.value = y;
   }

   function backSpace() {
     var elem = screen.value;
     var newElem = elem.slice(0, elem.length - 1);
     screen.value = newElem;
   }
}

Thank you for your time.

Cheers @Tiyor.

Answer 1

When you load the js via window.onload your functions are only available within the scope of that closure.

Attempting to refer to them in the onclick handler will fail because it needs them to be globally available.

You need to add the functions to the window object like this

window.onload=function(){
   var screen = document.getElementById("display");

   window.passToScreen = function (x) {
      screen.value += x;
   }

   window.clearDisplay = function () {
      screen.value = "";
   }

   window.doMath = function() {
      var y = screen.value;
      y = eval(y);
      screen.value = y;
   }

   window.backSpace = function() {
      var elem = screen.value;
      var newElem = elem.slice(0, elem.length - 1);
      screen.value = newElem;
   }
}

https://jsbin.com/dugiyuwuco/1/edit?html,css,js,output

Code working in JsBin but not any other browsers

Question

1 answers

solution1
0 ACCPTED 2017-11-10 19:20:10

Code working in JsBin but not any other browsers

Question

1 answers

solution1 0 ACCPTED 2017-11-10 19:20:10

solution1
0 ACCPTED 2017-11-10 19:20:10