object.style.display throwing message error on console

Question

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 :)

Answer 1

Simply put all your code that accesses the DOM in a window.onload() handler, like this:

<script>
    window.onload = function() {

        let plusMinus = document.getElementById('plus-minus');
        let buttonN9 = document.getElementById('nine');
        // other variable initialization 

        plusMinus.onclick = function() { 

            buttonN9.style.display = "none"; 
            // other handler code logic
        }

        // other event handlers
    };
</script>

This way, you are sure the DOM is ready before accessing or manipulating it.

Also, from the html file in your Github repository here; you included several external scripts (including jquery) after your script. Except these scripts depend on your own script - which is not likely, you should always place your own script last after other external scripts that your code may likely depend on.

UPDATE: There are issues with firing window.onload from within the body tag. see the answer on this post. In addition to my previous answer, try putting your scripts in the header tag like this:

<head>
    <!-- Place other external scripts here -->
    <script src='myscript.js'></script>
</head>

Answer 2

So, here is the solution. As a beginner, i made first some mistakes, i was repeating the functions. I've created for each behavior one function. The main problem is i wanted to get to an index thru an array without using any loop. The loop for made the deal and now it's behaving as i want ...

The list of the buttons did not change. What you have: - A function to handle a reset button. - A function to handle the value of the numbers buttons - A function to the positive/negative number - A function to reset the positive/negative number in case you click on one number.

This is how behave the calculator that i have so i'm just trying to do the exactly same thing. Thanks a lot for your help !

function buttonResetHandler(button){
  button.onclick = function (){
    button.innerHTML = "AC";
    preview = [];
    result.innerHTML = 0;
  }
}

buttonResetHandler(buttonAc);

// concatenation of the buttons numbers without any commas

function buttonNumberHandler(button, value){
  button.onclick = function(){
    buttonAc.innerHTML = "C";
    button = value;
    preview.push(button);
    const a = preview.join('');
    result.innerHTML = a;
  }
}

buttonNumberHandler(buttonN0, 0);
buttonNumberHandler(buttonN1, 1);
buttonNumberHandler(buttonN2, 2);
buttonNumberHandler(buttonN3, 3);
buttonNumberHandler(buttonN4, 4);
buttonNumberHandler(buttonN5, 5);
buttonNumberHandler(buttonN6, 6);
buttonNumberHandler(buttonN7, 7);
buttonNumberHandler(buttonN8, 8);
buttonNumberHandler(buttonN9, 9);


// positive to negative value and vice versa with the plus, minus key

function buttonPlusMinusHandler(button1, button2, button3, button4){
  button1.onclick = function(){

    let a = preview.join('');
    let b = parseInt(a, 10);
    let c = b * -1;

    result.innerHTML = c;
    button1.style.display = "none";
    button2.style.display = "block";
    for(i = 0; i < button3.length; i++){
      button3[i].style.display = "none";
    }

    for(i = 0; i < button4.length; i++){
      button4[i].style.display = "block";
    }

    if(result.innerHTML == c){
      button2.onclick = function(){
        result.innerHTML = b;
        button2.style.display = "none";
        button1.style.display = "block";
        }
      }
    }
  }

buttonPlusMinusHandler(plusMinus, plusMinus2, allButtonsN, allButtonsN2);

function buttonNumberResetPlusMinus(button, button2){
  for(i = 0; i < button.length; i++){
    button[i].onclick = function(){
      preview = [];
      result.innerHTML = 0;
      for(i = 0; i < button2.length; i++){
        button[i].style.display = "none";
        button2[i].style.display = "block";
      }
    }
  }
}

buttonNumberResetPlusMinus(allButtonsN2, allButtonsN);