I have 10 square boxes with different colors. I'm trying to show a border for the square that the user clicks on, and hide the border of the previous square. So far I have this, but I somehow get Cannot read property 'style' of null. My idea is to hide the current box border, then show a border for the new box that the user clicks.

Here is the jsFiddle of what I want. However, it doesn't seem to work. I can only use Javascript and can't use JQuery /

var currentBoxNum = 1;

function changeColor(background, boxNum) {
  document.getElementById("box" + currentBoxNum).style.borderStyle = "none";
  currentBoxNum = boxNum;
  document.getElementById("box" + currentBoxNum).style.borderStyle = "solid";
}
box1.onclick = function() { changeColor("#e6e2cf",1); }
box2.onclick = function() { changeColor("#dbcaac",2); }
box3.onclick = function() { changeColor("#c9cbb3",3); }
box4.onclick = function() { changeColor("#bbc9ca",4); }
box5.onclick = function() { changeColor("#a6a5b5",5); }
box6.onclick = function() { changeColor("#b5a6ab",6); }
box7.onclick = function() { changeColor("#eccfcf",7); }
box8.onclick = function() { changeColor("#eceeeb",8); }
box9.onclick = function() { changeColor("#bab9b5",9); }

<div class="colors">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
  <div id="box4">4</div>
  <div id="box5">5</div>
  <div id="box6">6</div>
  <div id="box7">7</div>
  <div id="box8">8</div>
  <div id="box9">9</div>
</div>

I have 10 square boxes with different colors. I'm trying to show a border for the square that the user clicks on, and hide the border of the previous square. So far I have this, but I somehow get Cannot read property 'style' of null. My idea is to hide the current box border, then show a border for the new box that the user clicks.

Here is the jsFiddle of what I want. However, it doesn't seem to work. I can only use Javascript and can't use JQuery https://jsfiddle/5op0d7zs/7/

var currentBoxNum = 1;

function changeColor(background, boxNum) {
  document.getElementById("box" + currentBoxNum).style.borderStyle = "none";
  currentBoxNum = boxNum;
  document.getElementById("box" + currentBoxNum).style.borderStyle = "solid";
}
box1.onclick = function() { changeColor("#e6e2cf",1); }
box2.onclick = function() { changeColor("#dbcaac",2); }
box3.onclick = function() { changeColor("#c9cbb3",3); }
box4.onclick = function() { changeColor("#bbc9ca",4); }
box5.onclick = function() { changeColor("#a6a5b5",5); }
box6.onclick = function() { changeColor("#b5a6ab",6); }
box7.onclick = function() { changeColor("#eccfcf",7); }
box8.onclick = function() { changeColor("#eceeeb",8); }
box9.onclick = function() { changeColor("#bab9b5",9); }

<div class="colors">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
  <div id="box4">4</div>
  <div id="box5">5</div>
  <div id="box6">6</div>
  <div id="box7">7</div>
  <div id="box8">8</div>
  <div id="box9">9</div>
</div>

• javascript
• html
• css

Share Improve this question Follow edited Apr 16, 2020 at 5:40 andyong5 asked Apr 16, 2020 at 5:03 andyong5andyong5 15711 silver badge1111 bronze badges 11

• 2 I have added how I call the function. – andyong5 Commented Apr 16, 2020 at 5:07
• 3 Your code seems to work as it is? Notice, that relying on global variables represnting ids is very error prone, don't use it. – Teemu Commented Apr 16, 2020 at 5:12
• 1 What is the problem? Or I mean... What is your question? When do you get "Cannot read property 'style' of null" It seems to work fine here. – bestprogrammerintheworld Commented Apr 16, 2020 at 5:39
• 1 In the fiddle you're using addEventListener to attach the events, but using a simple reference for the handler. This way only the event object is passed to the handler function. You need similar references as what you have in the code in the question, i.e. function() { changeColor("#e6e2cf",1); } etc. – Teemu Commented Apr 16, 2020 at 5:50
• 1 You have BOTH addeventlisteners and clickevents attached to the html elements (boxes). If you remove the addeventlisters it works. – bestprogrammerintheworld Commented Apr 16, 2020 at 5:52

 |  Show 6 more ments

4 Answers 4

Sorted by: Reset to default 3

You don't need to call the changeColor twice. Second thing You can do what you want in less code.

See this working example here.

You can check the updated fiddle here

var currentBoxNum = 1;

function changeColor(background, boxNum) {
  document.getElementById("box" + currentBoxNum).style.borderStyle = "none";
  currentBoxNum = boxNum;
  document.getElementById("box" + currentBoxNum).style.borderStyle = "solid";
  document.getElementById("box" + currentBoxNum).style.borderColor = "black";
}

document.getElementById("box1").addEventListener("click", function(){ changeColor("#e6e2cf", 1); });
document.getElementById("box2").addEventListener("click", function(){ changeColor("#dbcaac", 2); });
document.getElementById("box3").addEventListener("click", function(){ changeColor("#c9cbb3", 3); });
document.getElementById("box4").addEventListener("click", function(){ changeColor("#bbc9ca", 4); });
document.getElementById("box5").addEventListener("click", function(){ changeColor("#a6a5b5", 5); });
document.getElementById("box6").addEventListener("click", function(){ changeColor("#b5a6ab", 6); });
document.getElementById("box7").addEventListener("click", function(){ changeColor("#eccfcf", 7); });
document.getElementById("box8").addEventListener("click", function(){ changeColor("#eceeeb", 8); });
document.getElementById("box9").addEventListener("click", function(){ changeColor("#bab9b5", 9); });

#box1 {
  background-color: #e6e2cf;
  border: 2px solid black;
}

#box2 {
  background-color: #dbcaac;
}

#box3 {
  background-color: #c9cbb3;
}

#box4 {
  background-color: #bbc9ca;
}

#box5 {
  background-color: #a6a5b5;
}

#box6 {
  background-color: #b5a6ab;
}

#box7 {
  background-color: #eccfcf;
}

#box8 {
  background-color: #eceeeb;
}

#box9 {
  background-color: #bab9b5;
}

.pad {
  margin: 10px;
}

.colors {
  display: flex;
  flex-wrap: wrap;
}
.colors>div {
    width: 50px;
    margin: 10px;
    height: 50px;
}

<!-- This is a static file -->
<!-- served from your routes in server.js -->
<!DOCTYPE html>
<html>

  <head>
    <title>Show me!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis./css?family=Dancing+Script|Homemade+Apple|Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
  </head>

  <body>
  <main>
    <div class="pad">
      <h2 class="choose_pad">Choose your color</h2>
      <div class="colors">
        <div id="box1">1</div>
        <div id="box2">2</div>
        <div id="box3">3</div>
        <div id="box4">4</div>
        <div id="box5">5</div>
        <div id="box6">6</div>
        <div id="box7">7</div>
        <div id="box8">8</div>
        <div id="box9">9</div>
      </div>
    </div>
    </main>
  <footer>
    <p class="msg">
      Made on Glitch!
    </p>
    <!-- adds the glitch button at the bottom -->
    <div class="glitchButton"></div>
    <script src="https://button.glitch.me/button.js"></script>
    <script src="./script.js"></script>
  </footer>
  </body>

</html>

You're calling

document.getElementById("cb").style.backgroundColor = background;

There is no element with an id of "cb".

Update your code to properly reference the id of the element you wish to change the background color for.

Missing line: document.getElementById("box" + currentBoxNum).style. borderColor = background;

var currentBoxNum = 1;

function changeColor(background, boxNum) {
  document.getElementById("box" + currentBoxNum).style.borderStyle = "none";
  currentBoxNum = boxNum;
  document.getElementById("box" + currentBoxNum).style.borderStyle = "solid";
  document.getElementById("box" + currentBoxNum).style. borderColor = background;
}
box1.onclick = function() { changeColor("#e6e2cf",1); }
box2.onclick = function() { changeColor("#dbcaac",2); }
box3.onclick = function() { changeColor("#c9cbb3",3); }
box4.onclick = function() { changeColor("#bbc9ca",4); }
box5.onclick = function() { changeColor("#a6a5b5",5); }
box6.onclick = function() { changeColor("#b5a6ab",6); }
box7.onclick = function() { changeColor("#eccfcf",7); }
box8.onclick = function() { changeColor("#eceeeb",8); }
box9.onclick = function() { changeColor("#bab9b5",9); }

<div class="colors">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
  <div id="box4">4</div>
  <div id="box5">5</div>
  <div id="box6">6</div>
  <div id="box7">7</div>
  <div id="box8">8</div>
  <div id="box9">9</div>
</div>

You can change you changeColor method as below

function changeColor(background, boxNum) {
    $('.colors div').css('border', 'none'); // This will remove borders from all boxes
    document.getElementById("box" + boxNum).style.borderStyle = "solid";
    document.getElementById("box" + boxNum).style.borderColor = background;

}

Since this method is using jQuery, please include the jQuery in your html as below,

<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Also, this is just adding the border color not background color. If you want to add the background color as well you can add the following statement in changeColor function

document.getElementById("box" + boxNum).style.backgroundColor = background;