為什么我的布爾值不更改？
[英]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.