0

Tengo un componente de Bootstrap en este caso una barra de progreso y quiero cambiar un valor de esta barra de progreso mediante JavaScript.

<div id="barra1">
   <h3 class="progress-title">Paso 1</h3>
   <div class="progress blue">
     <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;">
       <div class="progress-value">0%</div>
     </div>
   </div>
</div>

He probado con lo siguiente pero no funciona:

document.getElementById("barra1.progress-value").innerHTML = "5%";

En cambio si coloco directamente en el elemento que esta dentro del componente si que funciona pero preferiría hacer referencia al componente 'barra1' desde el contenedor div de alguna manera para que el código se entendiera mejor, ya que puedo tener muchos componentes mas.

<div id="idValue" class="progress-value">0%</div>

document.getElementById("idValue").innerHTML = "5%";

1 respuesta 1

1

El problema es que la función getElementById solamente trabaja con el atributo id, no clases, si necesitas un selector más avanzado puedes usar querySelectorAll

document
  .getElementById('boton')
  .addEventListener('click', (e) => {
    var element = document.querySelectorAll('#barra1 .progress-value')[0];
    element.innerText = '5%';
  });
<div id="barra1">
   <h3 class="progress-title">Paso 1</h3>
   <div class="progress blue">
     <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;">
       <div class="progress-value">0%</div>
     </div>
   </div>
</div>
<button id="boton">Cambiar</button>

1
  • Buena solución ! Perfecto gracias !
    – Popularfan
    el 27 dic. 2018 a las 20:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.