Working with event handlers in Javascript

Question

const divs_demo = document.querySelectorAll('.common');
const display_texts = document.querySelectorAll('.text');



for(let div_demo of divs_demo){
    div_demo.addEventListener('click', ()=>{
        for(let display_text of display_texts){
            display_text.style.display = 'block';
        };
    });
};

.text{
    display: none;
}
.common{
    border: 1px solid;
}

<body>
    
    <div class="common">
        <h1>Text one</h1>
        <p class="text">Hello</p>
    </div>
    <div class="common">
        <h1>Text two</h1>
        <p class="text">Good morning</p>
    </div>
    <div class="common">
        <h1>Text three</h1>
        <p class="text">Lets code</p>
    </div>

    <script src="app.js"></script>
</body>

Am working on with event handlers in JavaScript, however, have encountered a problem on my way, on the above code, I have got access to all the div elements in my html, and some hidden text which I want it to be displayed once the event handler which I have passed to the divs is performed, but once one div is clicked, it displays the all the text including the one on the other divs, but my target is to only display the text on the div which is clicked. Is there a way to do that without repeating the same code to every div?

Chang Alex · Accepted Answer · 2022-08-13 11:51:15Z

3

Do you mean this?

const divs_demo = document.querySelectorAll('.common');
const display_texts = document.querySelectorAll('.text');

for (let div_demo of divs_demo) {
  div_demo.addEventListener('click', () => {
    div_demo.querySelector(".text").style.display = 'block';
  });
};

.text{
    display: none;
}
.common{
    border: 1px solid;
}

<body>
    
    <div class="common">
        <h1>Text one</h1>
        <p class="text">Hello</p>
    </div>
    <div class="common">
        <h1>Text two</h1>
        <p class="text">Good morning</p>
    </div>
    <div class="common">
        <h1>Text three</h1>
        <p class="text">Lets code</p>
    </div>

    <script src="app.js"></script>
</body>

answered Aug 13, 2022 at 11:51

Chang Alex

5174 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TAHER El Mehdi Over a year ago

OP said "without repeating the same code!"

TAHER El Mehdi · Accepted Answer · 2022-08-13 11:57:29Z

2

Is there a way to do that without repeating the same code to every div?

Yes there's which is event-delegation

document.addEventListener('click',(e)=>{
  e.target.parentElement.querySelector('.text').style.display = 'block';
})

.text {
  display: none;
}

.common {
  border: 1px solid;
}

<body>

  <div class="common">
    <h1>Text one</h1>
    <p class="text">Hello</p>
  </div>
  <div class="common">
    <h1>Text two</h1>
    <p class="text">Good morning</p>
  </div>
  <div class="common">
    <h1>Text three</h1>
    <p class="text">Lets code</p>
  </div>

  <script src="app.js"></script>
</body>

answered Aug 13, 2022 at 11:57

TAHER El Mehdi

9,6367 gold badges33 silver badges52 bronze badges

1 Comment

Amos Over a year ago

Thank you for the suggestion, lemme look at it

Adrià · Accepted Answer · 2022-08-13 13:15:30Z

1

The displayed texts are children of the divs demo, so you can simply get the .text child of the div clicked. Here's how I would do it.

const divsDemo = document.querySelectorAll('.common');
    
for (let divDemo of divsDemo) {
  divDemo.addEventListener('click', () => {
    const clickedText = divDemo.querySelector('.text');
    clickedText.style.display = 'block';
  });
}

.text{
    display: none;
}
.common{
    border: 1px solid;
}

<body>
    <div class="common">
        <h1>Text one</h1>
        <p class="text">Hello</p>
    </div>
    <div class="common">
        <h1>Text two</h1>
        <p class="text">Good morning</p>
    </div>
    <div class="common">
        <h1>Text three</h1>
        <p class="text">Lets code</p>
    </div>

    <script src="app.js"></script>
</body>

NOTE: It's highly recommendable that you respect style standards of the language that you're coding. In this case you should use camelCase naming for variables.
NOTE2: Instead of modifying the style, i would recommend you to use utility classes such as:

.invisible {
    display: none
}

And then appending or removing this class from the element that you want to disappear

edited Aug 13, 2022 at 13:15

answered Aug 13, 2022 at 12:06

Adrià

514 bronze badges

2 Comments

Amos Over a year ago

okay thank you, but now once I click the next div demo, I want the previous one to hide it text. And also thank you for your recommendation about the styling

Adrià Over a year ago

To do that, I would suggest maybe make all text invisible and the setting only the preffered.

Collectives™ on Stack Overflow

Working with event handlers in Javascript

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related