Noob de codificación total aquí. Tengo este HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="display.js"></script> </head> <body> <button type="button" onclick="SentenceInline()">Sentences = linline</button><br> <button type="button" onclick="SentenceBlock()">Sentences = block</button></p> <span class="sentence" id="first-p1-s1">Span 1</span> <span class="sentence" id="first-p1-s2">Span 2</span> … <span class="sentence" id="first-p1-s9">Span 9</span> <span class="sentence" id="first-p1-s10">Span 10</span> <span class="sentence" id="first-p1-s11">Span 11</span> <span class="sentence" id="first-p1-s12">Span 12</span> </p> </body> </html>…y este código en diplay.js:
function SentenceInline() {ChangeClassAttributes('sentence','inline');} function SentenceBlock() {ChangeClassAttributes('sentence','block');} function ChangeClassAttributes(FindClass,ChangeAttribute) { var ClassToStyle = document.getElementsByClassName(FindClass); for (let i = 0; i < FindClass.length; i++) { ClassToStyle[i].style.display = ChangeAttribute;}} Al hacer clic en el botón Sentences = block , se cambiará el atributo de visualización de tramos con sentence de clase para los primeros 8 elementos <span> y luego se detendrá. Los tramos restantes permanecen en línea.
¿Alguien puede señalar lo que estoy haciendo mal aquí? Gracias.
Está utilizando FindClass.length como el límite de su bucle. FindClass es el primer argumento de ChangeClassAttributes que es una sentence de cadena... que tiene una longitud de 8 :)
Para solucionar esto, deberá cambiar su ciclo para que se vea así
for (let i = 0; i < ClassToStyle.length; i++) { ClassToStyle[i].style.display = ChangeAttribute; }