Working with event handlers in Javascript-CodePudding

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 >
        <h1>Text one</h1>
        <p >Hello</p>
    </div>
    <div >
        <h1>Text two</h1>
        <p >Good morning</p>
    </div>
    <div >
        <h1>Text three</h1>
        <p >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?

CodePudding user response：

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 >
        <h1>Text one</h1>
        <p >Hello</p>
    </div>
    <div >
        <h1>Text two</h1>
        <p >Good morning</p>
    </div>
    <div >
        <h1>Text three</h1>
        <p >Lets code</p>
    </div>

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

CodePudding user response：

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 >
    <h1>Text one</h1>
    <p >Hello</p>
  </div>
  <div >
    <h1>Text two</h1>
    <p >Good morning</p>
  </div>
  <div >
    <h1>Text three</h1>
    <p >Lets code</p>
  </div>

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

CodePudding user response：

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 >
        <h1>Text one</h1>
        <p >Hello</p>
    </div>
    <div >
        <h1>Text two</h1>
        <p >Good morning</p>
    </div>
    <div >
        <h1>Text three</h1>
        <p >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