0

Olá, gostaria de pegar todos as divs chamadas "card" e verificar um texto dentro da div, o valor do texto setar como width de outra div. Exemplo
: inserir a descrição da imagem aqui

Porém só consegui fazer funcionar em um "card", nos outros não acontece nada.

Código JS:

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

Código HTML:

<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>

O objetivo é pegar o texto de cada h2.percentage e setar como largura da div.progress, porém com o código que fiz o resultado só ocorre com a primeira div card, não ocorre nada com as outras divs card. O que devo fazer?

1 Resposta 1

0

Como a classe que tem o % é um H2 com a class "percentage", pode fazer um seletor para esse elemento diretamente que é mais simples, e em seguida setar o % no elemento div anterior ao 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>

3
  • Quase deu certo, porém ele está mudando o width da class "progress-bar", o certo seria ele mudar o width da class "progress" Commented 28/01/2021 às 17:39
  • tens razão :) editei a pergunta, o previousElementSibling aponta para o div "progress-bar", e o firstChild para o div "progress", que é o primeiro "filho" do div Commented 28/01/2021 às 17:48
  • funcionou perfeitamente, muito obrigado :) Commented 28/01/2021 às 17:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .