코드는 JsBin에서 작동하지만 다른 브라우저에서는 작동하지 않습니다

이 질문은 이전에 물어 보았습니다. 나는이 모든 것을 읽고, 주어진 제안을 구현하려했지만 행운이 없었습니다. 기본 기능을 갖춘 계산기입니다. 숫자가 화면에 표시되지 않으면 운영자가 작동하지 않습니다. 기본적으로 js 파일이 작동하지 않습니다.코드는 JsBin에서 작동하지만 다른 브라우저에서는 작동하지 않습니다

- 범위 문제 삽입 된 js 파일은 window.onload=function(){}입니다.

- 버그를 찾으려고했지만 코드는 정상적으로 보입니다..

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.

출처

2017-11-10 Tiyor

같은 윈도우 객체에 기능을 추가해야합니다. 오류 메시지가 있습니까? –

js 파일이 작동하지 않습니다. – Tiyor

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

출처

2017-11-10 19:20:10

이제는 의미가 있습니다. 그것은 효과가있다. 고맙습니다. @ 네일. – Tiyor

코드는 JsBin에서 작동하지만 다른 브라우저에서는 작동하지 않습니다

답변

관련 문제