Почему мое логическое изменение не изменится?

Я создаю простой калькулятор, который (на данный момент) выполнит арифметику для однозначных чисел. Мой код неполный и чрезвычайно избыточный, пожалуйста, не комментируйте это.Почему мое логическое изменение не изменится?

<!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». Это проблема с областью? Пожалуйста, простите любые глупые ошибки, я только начинаю изучать веб-дизайн.

источник

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

Сделайте так, чтобы ваш отдых был привязан, и вы получите желаемый результат. –

Почему мое логическое изменение не изменится?

ответ

Смежные вопросы