Hello,
I’ve come across a bug in my Calculator Front end Project and I just can’t figure out how to fix it. Here is the code that’s bothering me:
var entry = [[],"",[]];
var ans = '';
var current = '';
//First time data entry--------
if(entry[1] === "") {
$('.num1').click(function() {entry[0].push("1");});
$('.num2').click(function() {entry[0].push("2");});
$('.num3').click(function() {entry[0].push("3");});
$('.num4').click(function() {entry[0].push("4");});
$('.num5').click(function() {entry[0].push("5");});
$('.num6').click(function() {entry[0].push("6");});
$('.num7').click(function() {entry[0].push("7");});
$('.num8').click(function() {entry[0].push("8");});
$('.num9').click(function() {entry[0].push("9");});
$('.decimal').click(function() {entry[0].push(".");});
}
// First Time Data Entry
//Second Time Data Entry
function secondTimeAround() {
$('.num1').click(function() {entry[2].push("1");});
$('.num2').click(function() {entry[2].push("2");});
$('.num3').click(function() {entry[2].push("3");});
$('.num4').click(function() {entry[2].push("4");});
$('.num5').click(function() {entry[2].push("5");});
$('.num6').click(function() {entry[2].push("6");});
$('.num7').click(function() {entry[2].push("7");});
$('.num8').click(function() {entry[2].push("8");});
$('.num9').click(function() {entry[2].push("9");});
$('.decimal').click(function() {entry[2].push(".");});
}
//Second Time Data Entry
$('.multiply').click(function() {
entry[1] = "*";
secondTimeAround();
});
$('.divide').click(function () {
entry[1] = "÷";
secondTimeAround();
});
$('.add').click(function () {
entry[1] = "+";
secondTimeAround();
});
$('.subtract').click(function () {
entry[1] = "-";
secondTimeAround();
});
$('.squared').click(function () {
entry[1] = "sq";
secondTimeAround();
});
If the code is not clear enough, basically my HTML buttons push their corresponding number to one of two subarrays in my larger array labeled entry. Even though I set the condition where the numbers can only be pushed into the first array if there is no operator selected, after I select the operator, the secondTimeAround function will run, but it will also put code into my first array!
An example of this would be:
I hit 27 + 37, the array would look like this [[“2”, “7”, “3”, “7”], “+”, [“3”, “7”]]
I can’t understand why it does this and it’s very annoying for me. Please help if you can
Without seeing the rest of the code, it is hard to tell.
However, I would urge you to rethink your strategy for this. Otherwise, you are going to write a third time function and a fourth time function, etc. Currently, if I were to add 1+1+1, the code couldn’t handle it. In what other ways could you tackle this problem?
However, if you are determined to use this strategy, we would have to see all the code to see how everything is interacting.
The reason the values are getting added to both arrays is that you are adding two event listeners. The second time you press the 3 and the 7 both events fire causing both array to fire.
The following code call an event listener to the “1” button. So when the one button is pressed it says push “1” to entry[0].
$('.num1').click(function() {entry[0].push("1");});
In the secondTimeAround() function you add a second listener.
$('.num1').click(function() {entry[2].push("1");});
So when the button is pressed a second time it now has 2 event listeners.
$('.num1').click(function() {entry[0].push("1");});
$('.num1').click(function() {entry[2].push("1");});
So the program execution will flow like this:
if entry[1] is empty
Add Event Listener to Number Buttons
User presses Button "1"
"1" Added to Entry[0]
User presses "Multiple"
"*" added to Entry[1]
Another Event Listener added to All Number Buttons
User press Button "3"
Both event listenrs fire adding "2" to entry[0] and entry[2].
As @sceadgugenga said it would be best to rethink the design here.
You could have each button like this:
<button value=“2” class=".num1"
<button value="+" class=".add"
var entries = [];
Add an event onClick Listener $(’.num1’).click(numbers.push(this.val);
Add an event onClick Listener $(’.add’).click(operators.push(this.val);
Then you will need to have some logic that splits the numbers and operators to do the arithmetic… this is where the fun starts 
I hope this makes sense. Feel free to ask for clarification. I found the calculator project trickier than I thought it was going to be!
@sceadgugenga @collinstommy
I took your advice and decided to change my javascript to something where I can chain it. My new problem is, that the operands for whatever reason don’t log correctly. I have pasted my full javascript code this time so you can see all of it
<!-- Reference the plugins -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/6a26d6855f.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<!-- Reference above this line -->
<script>
$(document).ready(function() {
function check () {
var operands = ['*', '+', '*', '/', '%', '.']
var lastChar = $('#history').text().slice(-1);
for (var i = 0; i < operands.length; i++) {
if (operands[i] == lastChar) {
$('#answer').text('Err');
}
}
}
$('.allClear').click(function () {
$('#answer').text('0');
$('#history').text(' ');
});
$('.add').click(function () {
Check();
$('#history').text($('#history').text() + '+');
})
$('.subtract').click(function () {
Check();
$('#history').text($('#history').text() + "-");
});
$('.multiply').click(function () {
Check();
$('#history').text($('#history').text() + "*");
});
$('.divide').click(function () {
Check();
$('#history').text($('#history').text() + "/");
})
$('.mod').click(function () {
Check();
$('#history').text($('#history').text() + "%");
})
$('.decimal').click(function() {
Check();
$('#history').text($('#history').text() + '.');
});
$('.equals').click(function() {
$('#answer').text(eval($('#history').text()));
$('#history').text($('#history').text() + ' = ' + eval($('#history').text()));
});
$('.num9').click(function() {
$('#history').text($('#history').text() + 9);
});
$('.num8').click(function() {
$('#history').text($('#history').text() + 8);
});
$('.num7').click(function() {
$('#history').text($('#history').text() + 7);
});
$('.num6').click(function() {
$('#history').text($('#history').text() + 6);
});
$('.num5').click(function() {
$('#history').text($('#history').text() + 5);
});
$('.num4').click(function() {
$('#history').text($('#history').text() + 4);
});
$('.num3').click(function() {
$('#history').text($('#history').text() + 3);
});
$('.num2').click(function() {
$('#history').text($('#history').text() + 2);
});
$('.num1').click(function() {
$('#history').text($('#history').text() + 1);
});
$('.num0').click(function() {
$('#history').text($('#history').text() + 0);
});
});
</script>
<style>
body {
background-color: rgb(57, 57, 57);
}
.calc {
width: 25%;
background-color: rgb(255, 0, 207);
margin-top: 10%;
border-radius: 10px;
}
#entrybox {
background-color: rgb(0, 87, 1);
margin-left: -2%;
margin-right: -2%;
margin-top: 5%;
border-radius: 10px;
padding-right: 2%;
padding-top:0%;
color: white;
margin-bottom: 5%;
}
.title {
margin: 0;
padding-top: 5%;
font-family: "Pacifico";
font-size: 5em;
color: white;
}
#entry {
font-family: "Press Start 2P";
font-size: 3em;
margin-bottom: 5%;
}
#history {
font-family: "Press Start 2P";
font-size: 1.5em;
}
.calButton {
font-family: "Oswald";
font-size: 1.75em;
border-radius: 10px;
padding-left: -2%;
padding-right: -2%;
margin-left: 5%;
margin-right: 3%;
margin-top: 1%;
margin-bottom: 2%;
color: white;
background-color: rgb(0, 232, 255);
border-color: rgb(0, 132, 145);
position: static;
}
.equalButton {
font-family: "Oswald";
font-size: 2em;
border-radius: 10px;
padding-left: 31%;
padding-right: 32%;
margin-left: 5%;
padding-top: -50%;
margin-right: 0%;
margin-top: 1%;
margin-bottom: 5%;
color: white;
padding-bottom: 2%;
}
#operator {
background-color: rgb(255, 0, 69);
border-color: rgb(190, 0, 51);
}
.mod {
margin-left: 6%;
padding-left: 5.5%;
padding-right: 5.5%;
}
button {
outline: none; // this one
box-shadow: 0 10px 0 #006599;
}
button:active {
box-shadow: 0 2px 0 #006599;
}
button:hover {
color: yellow;
}
</style>
<html>
<div class="calc container">
<h4 class="title text-center">Janne's Calculator</h4>
<div id='entrybox' class='text-right'>
<div id='entry'>
<p id='answer'>0</p>
</div>
<div id='history'>
<p>0</p>
</div>
</div>
<div class="buttons">
<button class="col-md-2 calButton num1">1</button> <button class="col-md-2 calButton num2">2</button> <button class="col-md-2 calButton num3">3</button> <button id = "operator" class="col-md-2 calButton multiply">*</button>
<button class="col-md-2 calButton num4">4</button> <button class="col-md-2 calButton num5">5</button> <button class="col-md-2 calButton num6">6</button> <button id = "operator" class="col-md-2 calButton divide">÷</button>
<button class="col-md-2 calButton num7">7</button> <button class="col-md-2 calButton num8">8</button> <button class="col-md-2 calButton num9">9</button> <button id = "operator" class="col-md-2 calButton add">+</button>
<button class="col-md-2 calButton num0">0</button> <button class="col-md-2 calButton decimal">.</button> <button id = "operator" class="col-md-2 calButton allClear">AC</button> <button id = "operator" class="col-md-2 calButton subtract">-</button>
<button class="equalButton equals" id="operator">=</button> <button class="calButton mod" id="operator">%</button>
</div>
</div>
</html>
You have defined the function check but call the function Check. Since js is case sensitive, these refer to different things As a result, you function isn’t being called.