¿Puede ayudar con el ejemplo de JS DOM a continuación?
La estructura if-else que especifiqué en el ejemplo 1 funciona, pero la estructura switch-case que especifiqué en el ejemplo 2 no funciona. La estructura interruptor-caja no funciona, aunque ambos funcionan igual. Por qué ?
Gracias
--- Ejemplo 1 / Obras ---
fontSizes.forEach(size => { size.addEventListener('click', () => { if(size.classList.contains('font-size-1')) { ..... } else if (size.classList.contains('font-size-2')) { ..... } }) })--- Ejemplo 2 / No funciona ---
fontSizes.forEach(size => { size.addEventListener('click', () => { switch (size.classList.contains) { case 'font-size-1': .... break; case 'font-size-2': .... break; } }) })No usó el switch correctamente, está verificando size.classList.contains que apunta a una función con cadenas (como font-size-1 ) en lugar de comparar el valor real.
Puede usar split (con las funciones includes ) o usar size.classList.contains en cada caso
Echa un vistazo aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes https://developer.mozilla.org/en-US/docs/Web/ API/DOMTokenList/contains Cómo verificar className en una declaración de cambio cuando un elemento tiene varias clases
contains es un método.
Entonces no puede usar: switch(size.classList.contains){case 'class1':...}
En su lugar, debe usar if(size.classList.contains('class1')){}
if desea un código más limpio, puede crear una matriz (u objeto) para los casos y ponerlos en un bucle.
Por favor, no es que no sean lo mismo. En el primero, está llamando a la función, agregue la salida, mientras que en el segundo, todo lo que está pasando a través de la declaración de cambio es la referencia a la función. size.classlist.contains es una función que espera un argumento. Por favor, sepa la diferencia.