0

Minha função só reconhece/retorna o 1 elemento e aplica a condição. Queria saber como selecionar e retornar todos o elementos? em JavaScript Puro!

function trocarCor() {
  var tech = document.querySelector(".tech").innerText
  // var la = lang.innerText
  var cor = document.querySelector(".cor")
  console.log(tech)
  switch (tech) {
    case "HTML":
      cor.classList.remove("cor")
      cor.classList.add("html")
      break
    case "JavaScript":
      cor.classList.remove("cor")
      cor.classList.add("js")
      break

    default:
      break
  }
}
trocarCor()
:root {
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
}
#cardContainer {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
    align-items: center;

}

.gitCard {
    display: flex;
    width: 30rem;
    height: 15rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    flex-shrink: 0;
    background: #22212C
}
.gitCard h4 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
}
.gitCard p {
    font-size: 1.2rem;
    font-weight: 400;
}
.gitCard .dados {
    display: grid;
    grid-template-columns: 10% 10% 65%;
    gap: 2rem;
    font-size: 1.2rem;
    font-weight: 400;
}


.gitCard .count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gitCard .techs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: flex-end;
}
.techs .html {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    background: #e36e00;
    border-radius: 50%;
    border: 0.2rem solid #837E9F ;
}
.techs .js {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    background: #fff200;
    border-radius: 50%;
    border: 0.2rem solid #837E9F ;
}
.techs .cor {
    width: 12px;
    height: 12px;
    display: block;
    background: #5b554f;
    border-radius: 50%;
    border: 2px solid #837E9F ;
}
<div id="cardContainer">
  <div class="gitCard borderShadow">
    <h4><img src="./img/folder.svg" alt="folder" />Nome Projeto</h4>
      <p class="pp">Descrição</p>
      <div class="dados">
        <div class="count star">
          <img src="./img/star.svg" alt="star">
          <span class="countStar">0</span>
        </div>
        <div class="count view">
          <img src="./img/view.svg" alt="star">
          <span class="countView">0</span>
        </div>
        <div class="techs">
          <span class="cor "}></span>
          <span class="tech">HTML</span>
        </div>
      </div>
  </div>
  <div class="gitCard borderShadow">
    <h4><img src="./img/folder.svg" alt="folder" />Nome Projeto</h4>
      <p class="pp">Descrição</p>
      <div class="dados">
        <div class="count star">
          <img src="./img/star.svg" alt="star">
          <span class="countStar">0</span>
        </div>
        <div class="count view">
          <img src="./img/view.svg" alt="star">
          <span class="countView">0</span>
        </div>
        <div class="techs">
          <span class="cor "}></span>
          <span class="tech">JavaScript</span>
        </div>
      </div>
  </div>
</div>

4
  • da maneira que escreveu o código apenas 1 sera selecionado ja com o document.querySelectorAll podera pegar todos e tera que percorrer todos; Commented 4/02/2023 às 2:11
  • Uma outra maneira tbm facil de implementar é o forEach junto a uma expressão ternária, Daria menos linhas; Commented 4/02/2023 às 2:15
  • No Console.log retorna isso Uncaught TypeError: document.querySelectorAll(...)[i] is undefined trocarCor 127.0.0.1:5500/script.js:4 trocarCor 127.0.0.1:5500/script.js:2 <anonymous> 127.0.0.1:5500/script.js:9 Commented 4/02/2023 às 2:50
  • E ainda Só seleciona o primeiro elemento. Commented 4/02/2023 às 2:51

0

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

Pesquise outras perguntas com a tag .