Change the value of a progress when click on a element with javascript

October 29, 2022

I want to change the value of the progress bar when each tap is clicked.

var taps = document.getElementsByClassName('et_pb_tab');

for (var i = 0; i < taps.length; i++) {
  taps[i].addEventListener('click', () => {
    var v1 = document.getElementById('p1').value;
    v1.value = v1 + 20;
  });
}

li.et_pb_tab_active {
  background-color: rgba(255, 211, 14, 0.29);
}

<progress value="0" max="100" id="p1"></progress>

<ul class="et_pb_tabs_controls">
  <li class="et_pb_tab et_pb_tab_active"><a href="#">Clase N° 1</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 2</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 3</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 4</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 5</a></li>
</ul>

I was trying to get the element "et_pb_tab" that is each tap and with a for add the listener, then click on the tap, the progress bar adds 20 to the value, but it’s not working.

>Solution :

You were very close. You had mixed up the progress element itself with its value. Here’s a slightly revised example of how it might work:

const
  v1 = document.getElementById('p1'),
  taps = document.getElementsByClassName('et_pb_tab');

for (const tap of taps) {  
  tap.addEventListener('click', () => v1.value += 20);
}

.et_pb_tab{ width: 2em; margin-bottom: 0.5em; border: 1px solid grey; text-align: center; }

<progress value="0" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
  <li class="et_pb_tab"> 1 </li>
  <li class="et_pb_tab"> 2 </li>
  <li class="et_pb_tab"> 3 </li>
  <li class="et_pb_tab"> 4 </li>
  <li class="et_pb_tab"> 5 </li>
</ul>

But you might want to consider using event delegation:

const
  v1 = document.getElementById('p1'),
  container = document.getElementsByClassName('et_pb_tabs_controls')[0];

  container.addEventListener('click', handleClick);

  function handleClick(event){ // Events bubble up to ancestors
    const clickedThing = event.target;
    if(!clickedThing.classList.contains("et_pb_tab")){//Ignores irrelevant clicks
      return;
    }
    v1.value += 20;
  }

.et_pb_tab{ width: 2em; margin-bottom: 0.5em; border: 1px solid grey; text-align: center; }

<progress value="0" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
  <li class="et_pb_tab"> 1 </li>
  <li class="et_pb_tab"> 2 </li>
  <li class="et_pb_tab"> 3 </li>
  <li class="et_pb_tab"> 4 </li>
  <li class="et_pb_tab"> 5 </li>
</ul>