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,output

代码在JsBin中工作，但不在任何其他浏览器中工作

1 个答案: