UPDATE so here is a better code for you. I cut it down to have only what's strictly necessary for you to reproduce the problem.
// change the color of the button when mousedown/up
let button = document.getElementsByClassName('button');
for(i = 0; i < button.length; i++){
button[i].onmousedown = function() {
this.style.backgroundColor = "#a3a3a3";
};
button[i].onmouseup = function() {
this.style.backgroundColor = "#808080";
};
}
let buttonLg = document.getElementsByClassName('button-lg');
for(i = 0; i < buttonLg.length; i++){
buttonLg[i].onmousedown = function() {
this.style.backgroundColor = "#a3a3a3";
};
buttonLg[i].onmouseup = function() {
this.style.backgroundColor = "#808080";
};
}
let button2 = document.getElementsByClassName('button2');
for(i = 0; i < button2.length; i++){
button2[i].onmousedown = function() {
this.style.backgroundColor = "#ffe299";
};
button2[i].onmouseup = function() {
this.style.backgroundColor = "#ffca47";
};
}
// show the numbers typed or result
let result = document.getElementById('result');
let preview = [];
let buttonAc = document.getElementById('ac');
let plusMinus = document.getElementById('plus-minus');
let plusMinus2 = document.getElementById('plus-minus2');
let buttonN7 = document.getElementById('seven');
let buttonN72 = document.getElementById('seven2');
let buttonN8 = document.getElementById('eight');
let buttonN82 = document.getElementById('eight2');
let buttonN9 = document.getElementById('nine');
let buttonN92 = document.getElementById('nine2');
// button AC erasing result and changing outlook to C when other buttons are clicked
// number 0 disapear when there is only zero and when a key is clicked
buttonAc.onclick = function () {
buttonAc.innerHTML = "AC";
preview = [];
result.innerHTML = 0;
}
// concatenation of the buttons numbers without any commas
buttonN7.onclick = function () {
document.getElementById('ac').innerHTML = "C";
buttonN7 = 7;
preview.push(buttonN7);
const a = preview.join('');
result.innerHTML = a;
}
buttonN8.onclick = function () {
document.getElementById('ac').innerHTML = "C";
buttonN8 = 8;
preview.push(buttonN8);
const a = preview.join('');
result.innerHTML = a;
}
buttonN9.onclick = function () {
document.getElementById('ac').innerHTML = "C";
buttonN9 = 9;
preview.push(buttonN9);
const a = preview.join('');
result.innerHTML = a;
}
// positive to negative value and vice versa with the plus, minus key
plusMinus.onclick = function(){
let a = preview.join('');
let b = parseInt(a, 10);
let c = b * -1;
result.innerHTML = c;
plusMinus.style.display = "none";
plusMinus2.style.display = "block";
//this code below works
//document.getElementById('nine').style.display = "none";
//that one does not work
buttonN9.style.display = "none";
buttonN92.style.display = "block";
}
plusMinus2.onclick = function(){
let a = preview.join('');
let b = parseInt(a, 10);
let c = b * -1;
result.innerHTML = b;
plusMinus2.style.display = "none";
plusMinus.style.display = "block";
}
buttonN92.onclick = function(){
result.innerHTML = 0;
preview = [];
//this code below works
//document.getElementById('nine').style.display = "block";
//that one does not work
buttonN9.style.display = "block";
buttonN92.style.display = "none";
}
h1 {
padding: 30px;
}
.result {
font-size: 80px;
border: 2px solid #000;
color: #f9f9f9;
padding-right: 20px;
background-color: #696969;
}
.row1 {
border: 2px solid #000;
}
.button,
.button2,
.button-lg {
width: 25%;
}
p {
cursor: pointer;
}
#ac,
#plus-minus,
#plus-minus2,
#percentage,
#seven,
#eight,
#nine,
#seven2,
#eight2,
#nine2 {
font-size: 40px;
background-color: #808080;
color: #f9f9f9;
height: 140px;
padding-top: 50px;
margin-bottom: 0px;
border-right: 1px solid #696969;
}
#ac,
#plus-minus,
#percentage,
#seven,
#eight,
#nine {
display: block;
}
#plus-minus2,
#seven2,
#eight2,
#nine2 {
display: none;
}
#division,
#multiplication{
font-size: 40px;
background-color: #ffca47;
color: #f9f9f9;
height: 140px;
margin-bottom: 0px;
padding-top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Calculator</title>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div class="container">
<div class="row">
<div class="col-xl-12">
<h5 id="result" class="card-title text-right result">0</h5>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="card-group row1">
<p id="ac" class="card-text text-center button">AC</p>
<p id="plus-minus" class="card-text text-center button">+ | -</p>
<p id="plus-minus2" class="card-text text-center button">+ | -</p>
<p id="percentage" class="card-text text-center button">%</p>
<p id="division" class="card-text text-center button2">/</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="card-group row2">
<p id="seven" class="card-text text-center button">7</p>
<p id="seven2" class="card-text text-center button">7</p>
<p id="eight" class="card-text text-center button">8</p>
<p id="eight2" class="card-text text-center button">8</p>
<p id="nine" class="card-text text-center button">9</p>
<p id="nine2" class="card-text text-center button">9</p>
<p id="multiplication" class="card-text text-center button2">X</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
So here is the idea: It's a calculator, so I opened my calculator from my iMac and I just checked the behavior to try to reproduce it.
What you can do: - clicking on the number, showing them on the screen result. - Clicking on AC make the button change to C and clear the screen result. - Clicking on %, / and X makes nothing yet. - Clicking on "+|-" swap the number to it's minus.
Here is what I'm trying to do. Normally, when you click the "+|-" key several time, it's going from negative to positive etc. ... and, normally if you click on a number it should go back to 0. I tried first with an external button to test and then I used the key 9 to see if it will work fine, with that code here:
document.getElementById('nine').style.display = "block"; //or none
It works perfectly! But, when I throw that code instead (I marked them up on the whole snippet to you identify them better)
buttonN9.style.display = "block"; //or none
BADABOOM, red alert on the console.
I've tried everything on every sens since hours; return my brain as much as I can; I'm still doing it. This evening, I must go somewhere with my wife. It's going to be hard to not think about it.
I will be honest with you, the calculator from the iPhone does not have the same behavior. If you fire 1,2,3 then +|- it goes -123. If you fire again 7, it goes -1237. So, maybe I mess up my brain too much, but I want to do it :)