https://prnt.sc/21vc411 Como puede ver en el enlace cuando hago clic en una letra en el lado izquierdo o en el lado derecho, esa letra debería desaparecer y debería ir al lado opuesto. Por ejemplo, cuando hago clic en la letra "A" de la izquierda, va a la derecha. Creé una letra en cada lado y, de forma predeterminada, la visualización de la derecha es "ninguna". Entonces, cuando hago clic en el de la izquierda, comienza la siguiente función;
function myFunction() { document.getElementById("aLetterLeftSide").style.display="none"; document.getElementById("aLetterRigtSide").style.display="inline-block"; }Funciona, pero tengo que hacerlo para cada letra con diferentes ID. Entonces, hay aproximadamente 50 funciones :( ¿Hay alguna forma de acortarlo a menos funciones? Gracias por sus respuestas :)
Está vinculando sus funciones a sus elementos utilizando los id de elemento (MDN Webdocs Link). Cuando tenga un montón de elementos que necesitan la misma función, simplemente vincúlelos usando Element ClassName (MDN Webdocs Link) en su lugar.
En el siguiente ejemplo, simplemente tengo letras con class definida como letter-span , y luego configuro la propiedad onclick (MDN Webdocs Link) iterativamente...
var letterspans = document.getElementsByClassName("letter-span"); var onclickfunc = function(e) { if(this.style.float) { this.style.float = ''; } else { this.style.float = 'right'; } }; for(i = 0; i < letterspans.length; i++) { letterspans[i].onclick = onclickfunc; } <span data-letter="a" class="letter-span">A</span> | <span data-letter="b" class="letter-span">B</span> | <span data-letter="c" class="letter-span">C</span> | <span data-letter="d" class="letter-span">D</span>Nota
Lo anterior es una demostración completa, funcional e independiente (tenga en cuenta: código reproducible mínimo ). En este caso, hice if(this.style.float){ and this.style.float = '' ; es posible que necesite una condición y un setter diferentes, tal vez, if(this.classList.contains('rightside')) {.. , y this.classList.add('rightside') junto con this.classList.remove('rightside') . No lo hice de esta manera porque quería algo completamente reproducible en una demostración.
La delegación de eventos le permite usar un solo detector de eventos para un número ilimitado de elementos.
Agregue el detector de eventos en un elemento principal que contenga todos los elementos en los que desea hacer clic:
document.querySelector(Parent).onclick = clickHandler;
En clickHandler(event) use event.target para obtener el elemento en el que se hizo clic:
const clicked = event.target
Comprueba si es el elemento correcto:
if (clicked.matches('.node')) {...
Acostúmbrese a usar class en lugar de #id El siguiente ejemplo le permite mover elementos desde y hacia ambos contenedores.
const moveNode = event => { const clicked = event.target; const from = clicked.parentElement; const toB = document.querySelector('.B'); const toA = document.querySelector('.A'); if (clicked.matches('.node')) { const node = from.removeChild(clicked); if (from.matches('.A')) { toB.appendChild(node); } else { toA.appendChild(node); } } else { return false; } } const main = document.querySelector('main'); main.onclick = moveNode; main { display: flex; justify-content: space-around; } section { display: flex; justify-content: space-between; align-items: center; width: 45vw; min-height: 20vh; border: 1px solid black; } .node { font-size: 3ch; border: 1px solid black; width: 3ch; height: 2ch; text-align: center; cursor: pointer; } <main> <section class='A'> <div class='node'>A</div> <div class='node'>B</div> <div class='node'>C</div> <div class='node'>D</div> <div class='node'>E</div> <div class='node'>F</div> <div class='node'>G</div> </section> <section class='B'></section> </main>