how to combine multiple event listeners and query selectors to one function?

Question

How can rewrite this event listeners to one function or loops that i wouldn't repeat myself. Thanks

const button1 = document.querySelector("#no-1");const content1 = document.querySelector("#open-1");

const button2 = document.querySelector("#no-2");const content2 = document.querySelector("#open-2");

const button3 = document.querySelector("#no-3");const content3 = document.querySelector("#open-3");

const button4 = document.querySelector("#no-4");const content4 = document.querySelector("#open-4");

button1.onclick = function() {content1.style.display ="block";}

button2.onclick = function() {content2.style.display ="block";}

button3.onclick = function() {content3.style.display ="block";}

button4.onclick = function() {content4.style.display ="block";}

Can you post the HTML you have for this? – Snow Jul 04 '19 at 20:58 — Snow, Jul 04 '19 at 20:58

score 2 · Answer 1 · answered Jul 04 '19 at 21:03

Why not just something like that ?


    for (let i=1; i<=4; i++) {
      const button = document.querySelector(`#no-${i}`);
      const content = document.querySelector(`#open-${i}`);
      button.onclick = function() {
        content.style.display ="block";
      }
    }

Or even

for (let i=1; i<=4; i++) {
  document.querySelector(`#no-${i}`).onclick = function() {
    document.querySelector(`#open-${i}`).style.display ="block";
  }
}

score 0 · Answer 2 · answered Jul 04 '19 at 21:10

In the future it's useful to include HTML, and have an example in the form of a snippet for us to play around with.

I've just made a snippet where your 'content' divs are wrapping the buttons. Arthur's answer is great and will work perfectly. An alternative (that I'm showing here) is to grab the id name of the button (you can access it by passing the event to the function then using e.target to access the element), extracting the number after the hyphen, then fetching the content div afterwards.

I stole the random color generator here:

Random color generator

to change the div background so that you can see that clicking on the button affects the right div.

function onButtonClick(e) {
  const targetNum = e.target.id.split("-")[1];
  document.querySelector('#open-'+targetNum).style.backgroundColor = getRandomColor();
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<div id="open-1" style="padding: 5px; border: 1px solid #ccc">
<button id="no-1" onclick="onButtonClick(event)">button 1</button>
</div>

<div id="open-2" style="padding: 5px; border: 1px solid #ccc">
<button id="no-2" onclick="onButtonClick(event)">button 2</button>
</div>

<div id="open-3" style="padding: 5px; border: 1px solid #ccc">
<button id="no-3" onclick="onButtonClick(event)">button 3</button>
</div>

<div id="open-4" style="padding: 5px; border: 1px solid #ccc">
<button id="no-4" onclick="onButtonClick(event)">button 4</button>
</div>

Im new here so i need to find my way around, next time ill include html or make snippet and thank for your reply — Deivis, Jul 04 '19 at 21:21

how to combine multiple event listeners and query selectors to one function?

2 Answers2