부울이 변경되지 않는 이유는 무엇입니까?

저는 (지금 현재) 한자리 숫자로 산술 연산을 수행하는 간단한 계산기를 만들고 있습니다. 내 코드가 불완전하고 극도로 중복되었으므로 그 점에 대해 언급하지 마십시오. 부울이 변경되지 않는 이유는 무엇입니까?

<!doctype html> 
<html> 
<head> 

    <title>Learning JavaScript</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style type="text/css"> 

     body { 
      font-family: "Courier New", Courier, monospace; 
     } 

     .break { 
      clear: both; 
     } 

     .row ul { 
      width: 100%; 
      float: left; 
      margin: 0; 
      padding: 0; 
     } 

     .row li { 
      margin: 0; 
      list-style: none; 
      float: left; 
      font-size: 3em; 
      padding: 15px; 
     } 

     .row li:hover { 
      border-bottom: 1px black solid; 
     } 

     #answer { 
      font-size: 3em; 
      padding: 15px; 
      font-weight: bold; 
     } 

    </style> 

</head> 

<body> 

    <ul class="row"> 
     <li id="number1">1</li> 
     <li id="number2">2</li> 
     <li id="number3">3</li> 
     <li id="add">+</li> 
    </ul> 

    <div class="break" ></div> 

    <ul class="row"> 
     <li id="number4">4</li> 
     <li id="number5">5</li> 
     <li id="number6">6</li> 
     <li id="subtract">-</li> 
    </ul> 

    <div class="break" ></div> 

    <ul class="row"> 
     <li id="number7">7</li> 
     <li id="number8">8</li> 
     <li id="number9">9</li> 
     <li id="multiply">*</li> 
    </ul> 

    <div class="break" ></div> 

    <ul class="row"> 
     <li id="divide">/</li> 
     <li id="number0">0</li> 
     <li id="clear">Clear</li> 
    </ul> 

    <div class="break" ></div> 

    <p id="answer"></p> 

    <script type="text/javascript"> 

     var a; 
     var b; 

     var order = false; 

     if (order == false) { 

      document.getElementById("number0").onclick = function() { 
       a = document.getElementById("number0").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number1").onclick = function() { 
       a = document.getElementById("number1").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number2").onclick = function() { 
       a = document.getElementById("number2").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number3").onclick = function() { 
       a = document.getElementById("number3").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number4").onclick = function() { 
       a = document.getElementById("number4").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number5").onclick = function() { 
       a = document.getElementById("number5").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number6").onclick = function() { 
       a = document.getElementById("number6").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number7").onclick = function() { 
       a = document.getElementById("number7").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number8").onclick = function() { 
       a = document.getElementById("number8").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 

      document.getElementById("number9").onclick = function() { 
       a = document.getElementById("number9").innerHTML; 
       console.log("a is " + a); 
       order = true; 
      } 
     } else if (order == true) { 
      document.getElementById("number0").onclick = function() { 
       b = document.getElementById("number0").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number1").onclick = function() { 
       b = document.getElementById("number1").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number2").onclick = function() { 
       b = document.getElementById("number2").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number3").onclick = function() { 
       b = document.getElementById("number3").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number4").onclick = function() { 
       b = document.getElementById("number4").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number5").onclick = function() { 
       b = document.getElementById("number5").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number6").onclick = function() { 
       b = document.getElementById("number6").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number7").onclick = function() { 
       b = document.getElementById("number7").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number8").onclick = function() { 
       b = document.getElementById("number8").innerHTML; 
       console.log("b is " + b); 
      } 

      document.getElementById("number9").onclick = function() { 
       b = document.getElementById("number9").innerHTML; 
       console.log("b is " + b); 
      } 
     } 

    </script> 

</body> 
</html>

내가 클릭 한 다음 숫자가 "B"에 할당되도록 내가 계산기에 숫자를 클릭하면 사실 내 부울 "순서"로 설정하십시오. 그러나 계산기에서 다른 번호를 클릭해도 프로그램은 해당 번호를 "b"로 설정하는 대신 해당 번호에 "a"를 설정합니다. 이것이 범위의 문제입니까? 어리석은 실수를 용서해주십시오, 저는 방금 웹 디자인을 배우기 시작했습니다.

출처

2014-12-23 Daniel Wang

을 처음 페이지를로드 할 때 당신은 (== 거짓 순서) '코드를'경우를 실행하는, 당신이 일에 클릭하지 후. 따라서'order = true'를 설정 한 후에는 절대 실행되지 않습니다. – Barmar

감사! 그러면 어떻게 해결할 수 있을까요? –

코드에 문제가 있습니다.

코드가 한 번만 실행되므로 order == true 일 때 이벤트가 바인딩되지 않습니다.

이렇게하는 것이 좋습니다. 각 번호의 이벤트 안에서 조건을 이동하십시오.

document.getElementById("number0").onclick = function() { 
       if(order == false) 
       { 
       a = document.getElementById("number0").innerHTML; 
       console.log("a is " + a); 
       order = true; 
       } 
       else{ 
        b = document.getElementById("number0").innerHTML; 
        console.log("b is " + b); 
       } 
      }

출처

2014-12-23 04:43:29 dotnetstep

클릭 핸들러에서 변수를 바인딩 할 때가 아니라 order 변수를 테스트하십시오.

document.getElementById("number0").onclick = function() { 
    if (order == false) { 
     a = parseInt(document.getElementById("number0").innerHTML, 0); 
     console.log("a is " + a); 
     order = true; 
    } else { 
     b = parseInt(document.getElementById("number0").innerHTML, 0); 
     console.log("b is " + b); 
    } 
}

출처

2014-12-23 04:42:19 Barmar

문제는 스크립트가 한 번만 한 번 주문이 항상 같은 동작을 생성합니다 잘못된 이벤트로 설정된 이후에 대한 귀하의 onclick()이 기능이 설정되도록로드하기 때문입니다.

더 명확히 말하면 주문의 가치는 변경되지만 DOM 요소와 연결된 이벤트는 다시 설정되지 않습니다.

중복에 대해 다음과 같이 사용 하시겠습니까?

var numbers = []; 

    var OnClickNumber = function(event) { 
     number = document.getElementById(event.target).innerHTML; 
     numbers.push[number]; 
     console.log(number[number.length-1]); 
    } 

    for(i=0;i<=9;i++) { 
     document.getElementById("number"+i).onclick = OnClickNumber(); 
    }

이렇게하면 코드를 덜 고통스럽고 가독성있게 만들 수 있습니다. 클릭 한 번호가 배열 번호에 추가되고 번호 []의 값을 조작하여 작업을 수행 할 수 있습니다.

희망이 당신을 도왔습니다.

출처

2014-12-23 04:51:30

점검은 한 번만 실행되므로 order==false 조건의 모든 기능이 바인드됩니다.

대신 글로벌 condtion의이 시도 :

document.getElementById("number0").onclick = function() { 
       a = document.getElementById("number0").innerHTML; 
       if (order === false) { 
        console.log("a is " + a); 
        order = true; 
       } 
       else 
       { 
        console.log("b is " + a); 
        order = false; 
       } 
      }

출처

2014-12-23 05:27:14

휴식을 취할 때 이렇게하면 원하는 결과를 얻을 수 있습니다. –

부울이 변경되지 않는 이유는 무엇입니까?

답변

관련 문제