CODEWITHSUNDEEP
javascripthtmlcss
Mohammad Khawar
Mohammad Khawar

Reputation: 29

How to change background of another div without affecting the first one

I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <div> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes

var Color = "#FF0";

function theFunction() {
  if (Color == '#FF0') {
    Color = '#F00';
  } else {
    Color = '#FF0';
  }

  document.getElementById('choose').style.backgroundColor = Color;

}
div#gameboard {
  background: #CCC;
  border: #999 2px solid;
  width: 1200px;
  height: 900px;
  margin: 70px;
  margin-top: 40px;
}
<div id="gameboard">
  <div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
    1
  </div>
  <div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
    2
  </div>
</div>

So what shall I do for the second div? Thanks

Upvotes: 1

Views: 200

Answers (3)

Jelohe
Jelohe

Reputation: 1

First you gotta change 

onclick="theFunction();"

to this

onclick="theFunction(this);"

And then your function will accept a parameter 

function theFunction(element) {
    [...]
    element.style.backgroundColor=Color;
}

That parameter is the clicked element.

Upvotes: 0

Dave Cripps
Dave Cripps

Reputation: 929

The easiest way is to remove the id's from your "number" divs, move all your styling code to CSS, and be sure to pass in this to the onclick event so you know which number div was clicked. You can then add a clicked class that turns the background red when applied and your JavaScript simply toggles the addition/removal of the clicked class. 

function theFunction(e) {
  e.classList.toggle("clicked");
}
#gameboard {
  background: #CCC;
  border: #999 2px solid;
  width: 1200px;
  height: 900px;
  margin: 70px;
  margin-top: 40px;
}
#gameboard div {
  width: 240px;
  height: 150px;
  margin-left: 30px;
  margin-top: 50px;
  background-color: #FF0;
  cursor: pointer;
  font-size: 130px;
  text-align: center;
}

#gameboard div.clicked {
  background-color: #F00;
}
<div id="gameboard">
  <div onclick="theFunction(this);">
    1
  </div>
  <div onclick="theFunction(this);">
    2
  </div>
</div>

This will only work for current, modern browsers. If you need to support older versions of IE (namely < IE10) then you will have to change the JavaScript slightly to test for the existence of the clicked class, then add or remove it accordingly.

You might also consider using a framework, like jQuery, where you can easily toggle the add/remove of the clicked class and have all the browser-compatible code obscured within the framework.

Upvotes: 4

BlackRoseGoat
BlackRoseGoat

Reputation: 25

Try this. 

<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">

Upvotes: 0

Related Questions