Quiero consolidar una función en un módulo para que pueda reutilizarse en varios elementos en lugar de tener que escribir una nueva función para cada elemento DOM en el que quiero usarla.

La función agrega una clase a un div a través de un evento de entrada de escucha. Asi que...

Cuando se completa la entrada "Música", se muestra "div class="music-input" . Cuando se completa la entrada "Age", se muestra "div class="age-input" . Cuando se rellena la entrada "Hair", se muestra "div class="hair-input" , etc., etc.

Por el momento tengo la siguiente función:

 <input type="text" id="music-taste" name="properties[Music Taste]"/> <input type="text" id="your-age" name="properties[Your Age]"/> <input type="text" id="hair-colour" name="properties[Hair Colour]"/> var music_req = document.querySelector("#music-taste"); var age_req = document.querySelector("#your-age"); var hair_req = document.querySelector("#hair-colour"); function woolShow(){ const showMusic = document.getElementById("music-input"); const showMusic_classes = showMusic.classList; showMusic_classes.add("show-div"); } music_req.addEventListener("input", woolShow);

Esto agrega la clase "show-div" al div existente para mostrar el contenido (hago esto a través de CSS)

 div#music { opacity: 0; transition:opacity 0.5s linear; padding: 20px; background: #e5e5e5; } div#music.show-div { opacity: 1; }

Me preguntaba si puedo reutilizar la función woolShow() de alguna manera usando parámetros para evitar tener que escribir una función diferente para cada div/entrada: música, edad, cabello.