为什么我的布尔值不更改？
[英]Why won't my boolean change?
问题描述
我正在创建一个简单的计算器（到目前为止），它可以对一位数字进行算术运算。 我的代码不完整且极其多余，请不要对此发表评论。
<!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>
如果在计算器中单击一个数字，则将布尔值“ order”设置为true，以便将下一个单击的数字分配给“ b”。 但是，如果我在计算器中单击另一个数字，程序仍将“ a”设置为该数字，而不是将该数字设置为“ b”。 这是范围的问题吗？ 请原谅任何愚蠢的错误，我才刚刚开始学习网页设计。
4 个解决方案
解决方案1
0 2014-12-23 04:42:19
在点击处理程序中测试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
您的代码有问题。
- 您的代码仅执行一次，因此当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);
}
}
解决方案3
0 2014-12-23 04:51:30
问题在于您的脚本仅加载一次，因此您的onclick（）函数设置为一次，并且由于order设置为false，因此您的事件将始终产生相同的行为。
更清楚地说，order的值将更改，但是不会再次设置与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();
}
这样，这将使您的代码更轻松，更易读。 单击的数字将添加到数组数字中，然后您可以操纵number []的值进行操作。
希望对您有所帮助。
解决方案4
0 2014-12-23 05:27:14
您的检查将只运行一次，因此将绑定order==false条件下的所有功能。
尝试以下操作，而不要使用全局条件：
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;
}
}
为什么我的 HTML 中的图像不会随着我的 JavaScript 函数而改变？
[英]Why won't the image in my HTML change with my JavaScript function?
为什么我的DIV不会更改为display ='none'（onclick JavaScript）？
[英]Why won't my DIV change to display='none' (onclick JavaScript)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.