Why won't my boolean change?
Question
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". However, if I click another number in the calculator, the program still sets "a" to that number, rather than setting that number to "b". Is this a problem with scope? Please forgive any stupid mistakes, I am just starting to learn web design.
4 answers
solution1
0 2014-12-23 04:42:19
Test the order variable in the click handlers, not when binding them.
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);
}
}
solution2
0 ACCPTED 2014-12-23 04:43:29
Problem with your code.
- Your code execute only once so when order == true then event never get bind.
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);
}
}
solution3
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.
To be clearer, the value of order will change but the events associated to your DOM elements won't be set again.
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.
Hope it helped you.
solution4
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.
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.