Change a value of an element within a bootstrap component with javascript?

Question

Change a value of an element within a bootstrap component with javascript?

Navigation

#1 by (1 votes)

0

I have a Bootstrap component in this case a progress bar and I want to change a value in this progress bar using 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>

I tried the following but it does not work:

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

On the other hand, if I put directly into the element that is inside the component, it works but I would prefer to refer to the component 'barra1' from the container div in some way so that the code could be better understood, since I can have many more components .

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

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

javascript html5 css3

asked by Popularfan 27.12.2018 в 03:11

source

1 answer

Problem with Intent.EXTRA_EMAIL to send an email Type error not detected: the 'length' property of null can not be read (Uncaught TypeError: Can not read property 'length' of null)

score 1 · Accepted Answer

The problem is that the function getElementById only works with the attribute id , not classes, if you need a more advanced selector you can use 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>