Estoy tratando de alternar clases usando el nombre de la clase. Mi código funciona bien cuando alterno el using id . ¿Cómo puedo hacer que funcione? Solo debe verse un rojo a la vez.
function hideshowmenu() { var element = document.getElementsByClassName("box"); element.classList.toggle("bg-red"); } .bg-red { margin-top: 10px; background-color: red; height: 20px; } <div class="mainmenu " onclick="hideshowmenu()">RED1</div> <div id="submenu" class="submenu"> <div class="mainmenu " onclick="hideshowmenu()">RED2</div> <div id="box" class="box"> </div> </div>Como sugiere el nombre de getElementsByClassName , devuelve el elemento S , por lo que está obteniendo HTMLCollection, no un elemento. Consulta el primero, así:
function hideshowmenu() { var element = document.getElementsByClassName("box")[0]; element.classList.toggle("bg-red"); }o:
function hideshowmenu() { var elements = document.getElementsByClassName("box"); elements[0].classList.toggle("bg-red"); }Lo que devuelve document.getElementsByClassName("box"); es una colección. Debe especificar el índice para acceder a la propiedad classList.
Tú lo estás haciendo:
var element = document.getElementsByClassName("box"); element.classList.toggle("bg-red");cuando deberías estar haciendo
var element = document.getElementsByClassName("box"); element[0].classList.toggle("bg-red");También puede recorrer los elementos si desea alternar varios valores.
Código de ejemplo violín https://jsfiddle.net/agy5jtb0/1/
getElementsByClassName("box") devuelve una colección de elementos, pero lo consideró como un elemento único, ese es su error. Sugiero algo como esto:
html :
<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div> <div id="submenu" class="submenu"> <div class="mainmenu" onclick="hideshowmenu(this)">RED2</div> <div id="box" class="box"></div> </div> js :
function hideshowmenu(el) { el.classList.toggle("bg-red"); }