style.display=“block” for event.target element and style.display=“none” for other elements

Question

I am trying to set the display property to "none" for all elements that has the "option" class, but then I want to extract the element I clicked on and change the display property from "none" back to "block".

I would like to find a solution in vanilla JS.

<h1 class="option" id="header1">Header 1</h1>
<h1 class="option" id="header2">Header 2</h1>
<h1 class="option" id="header3">Header 3</h1>
<h1 class="option" id="header4">Header 4</h1>
<h1 class="option" id="header5">Header 5</h1>

document.querySelector('*').addEventListener('click', (event) => {
    let clickedId = event.target.id;
    let clickedClass = event.target.className;

    if (clickedClass === "option") {
        var list = document.querySelectorAll(".option");        
            for (var i = 0; i < list.length; i++) {
                    list[i].style.display = "none";
            };

            document.getElementById(clickedId).style.display = "block";
    }

    console.log(event.target.style.display);
});

Thanks

Answer 1

just ignore the one that was clicked.

 document.querySelector('*').addEventListener('click', (event) => { let clickedId = event.target.id; let clickedClass = event.target.className; if (clickedClass === "option") { var list = document.querySelectorAll(".option"); for (var i = 0; i < list.length; i++) { // ignore the one that was clicked if (list[i] == event.target) continue list[i].style.display = "none"; }; // document.getElementById(clickedId).style.display = "block"; } // it is only useful if you display all the hidden again. event.target.style.display = "block"; console.log(event.target.style.display); }); 

 <h1 class="option" id="header1">Header 1</h1> <h1 class="option" id="header2">Header 2</h1> <h1 class="option" id="header3">Header 3</h1> <h1 class="option" id="header4">Header 4</h1> <h1 class="option" id="header5">Header 5</h1> 

Answer 2

Your code works, but does some unnecessary things like:

• the call to document.querySelector('*') when you already have the document object to which to attach events
• the call to document.getElementById(clickedId) when you already have the event.target to point to your clicked element
• setting the display style to none and then to block for your clicked element

Ideally, you should attach the click event to the closest parent of your elements, if possible. Here's how I would rewrite your code:

let parent = document.querySelector("#all_options_parent") || document;

parent.addEventListener('click', (event) => {
    if (event.target.className === "option") {
        event.target.style.display = "block";

        let allOptions = parent.querySelectorAll(".option");

        for (let option of allOptions) {
            if (option != event.target) {
                option.style.display = "none";
            }
        }

    }
});