how to write simple function easier

Question

I would like to create simple dropdown her is html code

 <ul class="flex">
          <li class="mr-10"><a href="#">Úvod</a></li>
          <li onclick="dropdown1()" class="flex mr-14 cursor-pointer">Pekné vecičky 
            <div id="myDropdown1" class="dropdown-content hidden ">
              <a href="#">Dropdown 1</a>
              <a href="#">Dropdown 2</a>
              <a href="#">Dropdown 3</a>
            </div>
          </li>
          <li onclick="dropdown2() class="flex mr-14 cursor-pointer">Výprodej/Akce
            <div id="myDropdown2" class="dropdown-content hidden ">
              <a href="#">Dropdown 1</a>
              <a href="#">Dropdown 2</a>
              <a href="#">Dropdown 3</a>
            </div>
          </li>
          <li onclick="dropdown3() class="flex mr-14 cursor-pointer">Šikovní ľudia
             <div id="myDropdown3" class="dropdown-content hidden ">
              <a href="#">Dropdown 1</a>
              <a href="#">Dropdown 2</a>
              <a href="#">Dropdown 3</a>
            </div>
          </li>
 </ul>

my js looks like this

function dropdown1() {
    document.getElementById("myDropdown1").classList.toggle("show-dropdown");
  }
function dropdown2() {
    document.getElementById("myDropdown2").classList.toggle("show-dropdown");
  }
function dropdown3() {
    document.getElementById("myDropdown3").classList.toggle("show-dropdown");
  }

I am using tailwind hidden class and than on click I show element, it works fine but the question is how I can write this js function easier and don´t repeat the code?

Take a look at [Event Delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). Basicly `ul.addEventListener('click', e => e.target.firstElementChild.classList.toggle('show-dropper'));` does all the work your three functions are doing now (`ul` is a reference to the ul element). — Teemu, Jun 23 '21 at 19:34
This is probably a better question for: https://codereview.stackexchange.com/ — disinfor, Jun 23 '21 at 19:36

score 1 · Answer 1 · 2021-06-23T19:51:31.747

Don't use inline HTML event delegation. Instead, you can do this:

document.querySelectorAll('ul li').forEach((item) => item.addEventListener('click', () => {
    const dropdownChild = item.querySelector('.dropdown-content');

    if (dropdownChild) {
        dropdownChild.classList.toggle('show-dropdown');
    }
}));

And your HTML would be this way:

<ul class="flex">
    <li class="mr-10"><a href="#">Úvod</a></li>
    <li class="flex mr-14 cursor-pointer">Pekné vecičky 
      <div id="myDropdown1" class="dropdown-content hidden ">
        <a href="#">Dropdown 1</a>
        <a href="#">Dropdown 2</a>
        <a href="#">Dropdown 3</a>
      </div>
    </li>
    <li class="flex mr-14 cursor-pointer">Výprodej/Akce
      <div id="myDropdown2" class="dropdown-content hidden ">
        <a href="#">Dropdown 1</a>
        <a href="#">Dropdown 2</a>
        <a href="#">Dropdown 3</a>
      </div>
    </li>
    <li class="flex mr-14 cursor-pointer">Šikovní ľudia
       <div id="myDropdown3" class="dropdown-content hidden ">
        <a href="#">Dropdown 1</a>
        <a href="#">Dropdown 2</a>
        <a href="#">Dropdown 3</a>
      </div>
    </li>
</ul>

JS_INF · Answer 2 · 2021-06-23T20:34:03.797

you can try a method

Example

function toggleClass(elem) {
document.getElementById(elem).classList.toggle("show-dropdown");
}
//Usage
toggleClass("myDropdown1")
toggleClass("myDropdown2")
toggleClass("myDropdown3")

or if you want to write them in just one line you can pass them as array

Example

function toggleClass(elem) {
    for(var i = 0; i < elem.length; i++) {
document.getElementById(elem[i]).classList.toggle("show-dropdown");
  }
}
//Usage
toggleClass(["myDropdown1", "myDropdown2", "myDropdown1"]);

i think the first one is better for your case and you can use this inside onclick attribute instead of element id, getElementById

how to write simple function easier

2 Answers2