Estoy tratando de cambiar el estilo de un div con vainilla JS. El div debe tener una identificación determinada y el tab-content nombre de la clase:
function showTabContent() { document.getElementById(tabID).classList.contains("tab-content").style.display = "block"; }HTML:
<div id="1" class="tab-content">Test...</div> <div id="2" class="tab-content">Test...</div> <div id="3" class="tab-content">Test...</div>Si por ejemplo ejecuto:
showTabContent(2); Debería configurar el div tab-content con id 2 para diseñar el bloque de visualización. No está trabajando. ¿Qué estoy haciendo mal?
En primer lugar, debe pasar tabID a su función.
El método .containe() en JavaScript muestra si una cadena tiene una palabra o letra específica y, si la condición es verdadera, devolverá true . (booleano) si desea obtener el elemento con una ID específica y una clase tab-content , puede trabajar con querySelector .
document.querySelector("#"+tabID+".tab-content").style.display="block"Pero dado que el ID suele ser único, es suficiente referirse solo al ID.
document.getElementById(tabID).style.display="block"es el código pegado es directamente desde el código fuente.
La función anterior showTabContent() debe aceptar el argumento. showTabContent(tabId)
Dado que está pasando la id a la función showTabContent , puede recibirla usando el parámetro, es decir, tabId .
luego tienes que encontrar el elemento y verificar su existencia. Es posible que el elemento con la id especificada no esté presente.
function showTabContent(tabId) { const element = document.getElementById(tabId); if (element) { element.style.display = "block"; element.style.backgroundColor = "lime"; // FOR VISUAL PURPOSE ONLY } } showTabContent(2); <div id="1" class="tab-content">Test...</div> <div id="2" class="tab-content">Test...</div> <div id="3" class="tab-content">Test...</div>