可在JsBin中運行的代碼，但不能在任何其他瀏覽器中運行

Question

之前問過這個問題，我閱讀了所有問題，並嘗試執行給出的建議，但是沒有運氣。 這是具有基本功能的計算器。 屏幕上未顯示數字，操作員無法使用。 基本上，js文件無法正常工作。

-范圍問題； 在window.onload=function(){}插入了js文件 。

-試圖查找錯誤，但代碼看起來還不錯 。

我將css和js文件鏈接為單獨的文件，代碼在JsBin中運行，但沒有任何瀏覽器。

有什么建議么：

這是我的代碼：

<!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代碼：

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檔案：

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;
   }
}

感謝您的時間。

干杯@Tiyor。

Answer 1

當您通過window.onload加載js時，您的函數僅在該閉包范圍內可用。

嘗試在onclick處理程序中引用它們會失敗，因為它需要它們在全局范圍內可用。

您需要像這樣將功能添加到窗口對象

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，輸出

可在JsBin中運行的代碼，但不能在任何其他瀏覽器中運行

問題描述

1 個解決方案

解決方案1
0 已采納 2017-11-10 19:20:10

可在JsBin中運行的代碼，但不能在任何其他瀏覽器中運行

問題描述

1 個解決方案

解決方案1 0 已采納 2017-11-10 19:20:10

解決方案1
0 已采納 2017-11-10 19:20:10