Создание эффективной функции вместо повторяющихся функций

Question

У меня есть функция, которая onclick отображает форму.

Интересно, есть ли эффективный способ кодирования вместо создания 4 разных функций для 4 разных форм? Ниже приведен пример для 4 форм, но я работаю с несколькими формами.

<div class="navbar">
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction1()">Category 1
    <i class="fa fa-caret-down"></i>
  </button>
  </div> 

// То же самое для других 3 категорий

<div id="form1" style = "display:none">
<form action="#" method="post" id="demoForm1" class="demoForm1" >
    <fieldset>
        <legend>Use CTRL to select multiple options</legend>

        <p>
            <select name="demoSel[]" id="demoSel" size="4" multiple>
                <option value="ABC">ABC</option>
            </select>
            <input type="submit" value="Submit" />
            <textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>
        </p>

    </fieldset>
</form>
</div>


//Same for other 3 forms


  <script>

function myFunction1() {
document.getElementById("form1").style.display = '';
}

function myFunction2() {
  document.getElementById("form2").style.display = '';
}

function myFunction3() {
  document.getElementById("form3").style.display = '';
}

function myFunction4() {
  document.getElementById("form4").style.display = '';
}
</script>

Answer 1

Обычно не очень хорошая идея использовать встроенные обработчики событий.

Затем добавьте атрибут data-* к каждой кнопке и удалите onclick атрибут вроде:

<button class="dropbtn" data-target="form1">...</button>
<button class="dropbtn" data-target="form2">...</button>
<button class="dropbtn" data-target="form3">...</button>
<button class="dropbtn" data-target="form4">...</button>

Затем вы можете использовать .addEventListener() на этих кнопках с классом dropbtn и обновить соответствующее свойство отображения элемента формы, например:

const btns = document.querySelectorAll(".dropbtn");
btns.forEach(function(btn) {
  btn.addEventListener("click", function(cbox) {
     document.getElementById(this.dataset.target).style.display = '';
  });
});

Демо:

const btns = document.querySelectorAll(".dropbtn");
btns.forEach(function(btn) {
  btn.addEventListener("click", function(cbox) {
    document.getElementById(this.dataset.target).style.display = '';
  });
});

<button class="dropbtn" data-target="form1">Form 1</button>
<button class="dropbtn" data-target="form2">Form 2</button>
<br><br>
<form id="form1" style="display:none">Form 1 Content Here</form>
<form id="form2" style="display:none">Form 2 Content Here</form>

Answer 2

Не используйте атрибуты on-event:

<button onclick='eventHandler()'></button>

Используйте прослушиватели событий или свойства on-event:

const btn = document.querySelector('button');

btn.addEventListener('click', eventHandler);

// OR

btn.onclick = eventHandler;

Если у вас есть несколько целей, которые нужно щелкнуть - зарегистрируйте событие click для родительского тега, который разделяют все целевые теги.

document.querySelector('main').onclick = toggleForm;

Вместо использования .style на каждом <form> классах переключения

// CSS
.off { display: none }

// JavaScript
forms[idx].classList.toggle('off');

---

Demo

Примечание: Подробности прокомментированы в демоверсии

/*
- Reference the parent tag (<main>)
- Register <main> to the click event
- Event handler function toggleForm() is called on click
*/
document.querySelector('main').onclick = toggleForm;

// Event handler always passes Event Object (event)
function toggleForm(event) {
  // Collect all <form>s into a HTML Collection
  const forms = document.forms;
  // Collect all <button> into a NodeList
  const buttons = document.querySelectorAll('button');
  // Reference the tag the user clicked (<button>)
  const clicked = event.target;

  // if a <button> was clicked...
  if (clicked.matches('button')) {
    // ...toggle the <button>'s .on and .off classes
    clicked.classList.toggle('off');
    clicked.classList.toggle('on');
    /*
    - Convert buttons NodeList into a rel Array
    - Iterate through the buttons array and return
      the index of the clicked <button>
    */
    let idx = [...buttons].flatMap((button, index) => clicked === button ? [index] : []);
    /*
    - Toggle the .off class on the <form> located at the 
      index that was obtained from the previous statement
    */
    forms[idx].classList.toggle('off');
  }
}

button {
  display: inline-block;
  width: 11ch
}

button.off::before {
  content: 'Show '
}

button.on::before {
  content: 'Hide '
}

form.off {
  display: none
}

<main>
  <button class='off' type='button'>A</button>
  <button class='off' type='button'>B</button>
  <button class='off' type='button'>C</button>
  <button class='off' type='button'>D</button>
  <hr>
  <form id='A' class='off'>
    <fieldset>
      <legend>Form A</legend>
    </fieldset>
  </form>
  <form id='B' class='off'>
    <fieldset>
      <legend>Form B</legend>
    </fieldset>
  </form>
  <form id='C' class='off'>
    <fieldset>
      <legend>Form C</legend>
    </fieldset>
  </form>
  <form id='D' class='off'>
    <fieldset>
      <legend>Form D</legend>
    </fieldset>
  </form>
</main>