select div on click with different ids javascript

Question

I have div question and one for each answer:

<div id="question"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>

when user click in one div I'd to 'select' it adding a css background.

So, I did:

var divA = document.getElementById('a');
divA.addEventListener('click', function () {
  remove();
  divA.classList.add("select");
},false);

var divB = document.getElementById('b');
divB.addEventListener('click', function () {
  remove();
  divB.classList.add("select");
},false);

... same thing to C, D and E.

I'd like to not repeat the code for each div select. any ideas how to avoid all this divA, divB, divC, divD, divE functions and add all in one?

my remove function:

function remove(){
    document.getElementById('a').classList.remove("select");
    document.getElementById('b').classList.remove("select");
    document.getElementById('c').classList.remove("select");
    document.getElementById('d').classList.remove("select");
    document.getElementById('e').classList.remove("select");
}

document.querySelectorAll, select all the elements by a class. Loop over them and add an event handler to them. The event handler can reference the element clicked with the event.target or this within the callback — Taplar
– Taplar, Commented Jan 7, 2020 at 18:50
You can use ids, and select multiple ids in a selector, however .sharedclass is much cleaner than #id1, #id2, #id3, #id4, ... — Taplar
– Taplar, Commented Jan 7, 2020 at 18:54

Maheer Ali · Accepted Answer · 2020-01-07 18:56:47Z

You need to do the following steps:

Use a same class for each option. Like I user "answer" in below code.
Then use querySelectorAll() to select all the elements in an array.
Loop through array and add event listener to each item.
In the function passed to event listener. First unselect all the elements.
Then select the clicked element.

I have added a little styling from myself.

Note: You can also remove the id from the elements the code will still work.

const answers = document.querySelectorAll('.answer');
answers.forEach(elm => {
  elm.addEventListener('click', e =>{
    //removing all the previous selections
    answers.forEach(x => x.classList.remove('select'))
    //selecting the current one
    e.target.classList.add('select');
  })
})

.answer{
  padding:15px;
  font-size: 30px;
  text-align: center;
  background: lightgray;
  border-bottom:1px solid black;
  font-family: cursive;
}

.select{
  background:  rgb(245, 245, 245)
}

.answer:hover{
  background: rgb(245, 245, 245);
  cursor:pointer;
}

<div id="question"></div>
<div class="answer" id="a">A</div>
<div class="answer" id="b">B</div>
<div class="answer" id="c">C</div>
<div class="answer" id="d">D</div>
<div class="answer" id="e">E</div>

Collectives™ on Stack Overflow

select div on click with different ids javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related