Edit class style individually with JS

Question

Hello, I would like to take all the Divs called "card" and check a text within the div, the value of the text set as width of another div. Example
:

But I only managed to make it work in one "card", in others nothing happens.

JS Code:

function getPercentage(){
cards = document.querySelectorAll(".card");
cards.forEach(card => {
    ValPercentage = document.querySelector(".percentage").innerHTML;
    document.querySelector(".progress").style.width = ValPercentage;
});
};
getPercentage();

HTML code:

<div class="card">
    <img src="images/html5.svg" alt="HTML logo">
    <div class="card-info">
    <div class="card-title">
      <h2>HTML</h2>
      <p>Avançado</p>
    </div>
    <div class="card-percentage">
      <div class="progress-bar"><div class="progress"></div></div>
      <h2 class="percentage">90%</h2>
    </div>
  </div>

The goal is to take the text of each H2.percentage and set as the width of the div.Progress, but with the code I did the result only occurs with the first div card, nothing happens with the other Divs card. What should I do?

Answer 1

Since the class that has the % is an H2 with the class "percentage", you can make a selector for that element directly which is simpler, and then set the % in the div element before the H2;

function getPercentage(){
percentages = document.querySelectorAll("h2.percentage");
  percentages.forEach(elemento => {
      var valPercentage = elemento.innerHTML;

      // seta a % no "previousElementSibling" que é o elemento vizinho anterior, o DIV com o progress-bar
      elemento.previousElementSibling.firstChild.style.width = valPercentage;
  });
};

getPercentage();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="card">
    <img src="images/html5.svg" alt="HTML logo">
    <div class="card-info">
    <div class="card-title">
      <h2>HTML</h2>
      <p>Avançado</p>
    </div>
    <div class="card-percentage">
      <div class="progress-bar"><div class="progress"></div></div>
      <h2 class="percentage">90%</h2>
    </div>
    <div class="card-percentage">
      <div class="progress-bar"><div class="progress"></div></div>
      <h2 class="percentage">35%</h2>
    </div>
    <div class="card-percentage">
      <div class="progress-bar"><div class="progress"></div></div>
      <h2 class="percentage">70%</h2>
    </div>
  </div>
  </div>