How to change the background color of div onclick?

Question

I want to create a multiple choice test in HTML and I am using "div"s as answer options. When one option (div) is clicked, its background color should be changed. Here is my code:

        <div id="option" onclick="select()">Option 1</div>
        <div id="option" onclick="select()">Option 2</div>
        <div id="option" onclick="select()">Option 3</div>
      </div>

      <script>
        var div = document.getElementById("option");

        function select() {
          div.setAttribute("id", "optionSelected");
        }
      </script>

CSS code:

#option {
  background-color: #ffffff;
}
#optionSelected {
  background-color: #008080;
}

When I click any of the divs only the first div's background changes, because they all have the same id.

Answer 1

Rather than trying to assign the class based on ID (which as pointed out is not correct to have duplicates), you could instead just use the event target:

 function select(e) { // Unset selected class from other options const selected = document.querySelectorAll('.option-list.option-selected'); selected.forEach(function(el) { el.classList.remove('option-selected'); }); e.target.classList.add('option-selected'); }

 .option { background-color: #FFFFFF; padding: 5px; }.option-selected { background-color: #008080; color: #FFFFFF; }

 <div class="option-list"> <div class="option option-selected" onclick="select(event)">Option 1</div> <div class="option" onclick="select(event)">Option 2</div> <div class="option" onclick="select(event)">Option 3</div> </div>

Answer 2

This is my time posting an answer so sorry if it's not the best.

This is the simpliest way to do it I could think of right now.

You would have to change this

<div id="option" onclick="select()">Option 1</div>
<div id="option" onclick="select()">Option 2</div>
<div id="option" onclick="select()">Option 3</div>

to this

<div id="option1" class="option" onclick="select('option1')">Option 1</div>
<div id="option2" class="option" onclick="select('option2')">Option 1</div>
<div id="option3" class="option" onclick="select('option3')">Option 1</div>

So you have a way of distinguishing between the different divs. Also each element would call the function specifying which element should be changed.

---

Then add an parameter to the function so you can specify which element you want to change.

The other line of code replaces the current class "option" with "optionSelected".

<script>
    function select(id) {

        var div = document.getElementById(id);

        div.classList.replace("option", "optionSelected");

    }
</script>

---

Finally just change the CSS rules to classes.

.option {
  background-color: #ffffff;
}

.optionSelected {
  background-color: #008080;
}

Answer 3

You can't assign the same ID to all the divs. ID's must be unique. Use a class instead.

Answer 4

1) You should never assign multiple elements the same ID, they should always be different ID's.

2) You could instead use a class, and then call that within the JavaScript function.

var div = document.getElementsByClassName("option");
function select() {
    div.setAttribute("class", "optionSelected")
}

Hope this helps!

Answer 5

so, this is what you've asked for but don't you want to use a drop down box instead?

 function select(opt) { var div = document.getElementById(opt); div.setAttribute("class", "optionSelected"); }

 #option { background-color: #ffffff; }.optionSelected { background-color: #008080; }

 <div id="option1" onclick="select('option1')">Option 1</div> <div id="option2" onclick="select('option2')">Option 2</div> <div id="option3" onclick="select('option3')">Option 3</div>

Answer 6

You should set your project up using classes, if you want to use Id's here is a way to do that.

        <div id="option" onclick="select(this)">Option 1</div>
        <div id="option" onclick="select(this)">Option 2</div>
        <div id="option" onclick="select(this)">Option 3</div>
      </div>

      <script>
        var div = document.getElementById("option");

        function select(opt) {

          opt.setAttribute("id", "optionSelected");
        }
      </script>

Answer 7

You can simplify what you're trying to do by adding this as an argument to your function (added color toggle on each click):

 <div class="option" onclick="select(this)">Option 1</div> <div class="option" onclick="select(this)">Option 2</div> <div class="option" onclick="select(this)">Option 3</div> <script> function select(el) { el.classList.toggle("optionSelected"); } </script> <style>.option { background-color: #ffffff; }.optionSelected { background-color: #008080; } </style>

Answer 8

You can also do it without javascript, using just css.

 .option { background-color: #ffffff; cursor: pointer; /* add if you want */ } /* When the div with the unique id gets focus due to a click the background color is applied */ #option1:focus, #option2:focus, #option3:focus { background-color: #008080; }

 <,-- Add a class for the background color that applies to the three divs, and add unique id's to each div --> <div> <div class="option" id="option1" tabindex="1">Option 1</div> <div class="option" id="option2" tabindex="2">Option 2</div> <div class="option" id="option3" tabindex="3">Option 3</div> </div>