为什么我的布尔值不更改？
[英]Why won't my boolean change?
问题描述
I am creating a simple calculator that (as of now) will perform arithmetic to single-digit numbers. 
我正在创建一个简单的计算器（到目前为止），它可以对一位数字进行算术运算。 My code is incomplete and extremely redundant, please do not comment on that. 我的代码不完整且极其多余，请不要对此发表评论。
<!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>
I set my boolean "order" to be true if I click on a number in the calculator, so that the next number clicked is assigned to "b". 如果在计算器中单击一个数字，则将布尔值“ order”设置为true，以便将下一个单击的数字分配给“ b”。 However, if I click another number in the calculator, the program still sets "a" to that number, rather than setting that number to "b". 但是，如果我在计算器中单击另一个数字，程序仍将“ a”设置为该数字，而不是将该数字设置为“ b”。 Is this a problem with scope? 这是范围的问题吗？ Please forgive any stupid mistakes, I am just starting to learn web design. 请原谅任何愚蠢的错误，我才刚刚开始学习网页设计。
4 个解决方案
解决方案1
0 2014-12-23 04:42:19
Test the order variable in the click handlers, not when binding them. 在点击处理程序中测试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);
}
}
解决方案2
0 已采纳 2014-12-23 04:43:29
Problem with your code. 您的代码有问题。
- Your code execute only once so when order == true then event never get bind. 您的代码仅执行一次，因此当order == true时，事件将永远不会被绑定。
I suggest you have to do like this. 我建议你必须这样做。 Move your condition inside event of each number. 在每个数字的事件内移动条件。
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);
}
}
解决方案3
0 2014-12-23 04:51:30
The problem is that your script is loading only once so your onclick() functions are set for once and since order is set to false your event will always produce the same behaviour. 问题在于您的脚本仅加载一次，因此您的onclick（）函数设置为一次，并且由于order设置为false，因此您的事件将始终产生相同的行为。
To be clearer, the value of order will change but the events associated to your DOM elements won't be set again. 更清楚地说，order的值将更改，但是不会再次设置与DOM元素关联的事件。
About redundancy may I suggest you to use something like this ? 关于冗余，我建议您使用类似的方法吗？
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();
}
This way this will make your code less painful and more readable. 这样，这将使您的代码更轻松，更易读。 The numbers clicked will be added to the array numbers, then you can manipulate the values of numbers[] to make your operations. 单击的数字将添加到数组数字中，然后您可以操纵number []的值进行操作。
Hope it helped you. 希望对您有所帮助。
解决方案4
0 2014-12-23 05:27:14
your check will run only one time so all the functions under order==false condition will be binded. 您的检查将只运行一次，因此将绑定order==false条件下的所有功能。
Try this instead of your global 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;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.