I need help with the textContent function

Question

I need help with the textContent function

Asked 3 years, 8 months ago

Viewed 67 times

5

I have to validate all the <td> of <tr> through the Javascript, for a college project!

I used the following code:

var dvd = document.querySelector(".info-dvd");
var dvdInfo = dvd.textContent;
if (dvdInfo == "Sim" || dvdInfo == "Não") {
  console.log("tudo funcionando");
} else {
  dvd.textContent = "Preecha o campo com Sim ou Não";
  console.log("campo invalido");
}
if (dvdInfo == "") {
  dvd.textContent = "O Campo não pode estar vazio!"
  console.log("campo está vazio");
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Lista de Filmes Assistidos</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>
  <header>
    <div class="container">
      <h1>Listas de Filmes Assistidos</h1>
    </div>
  </header>
  <main>
    <section class="container">
      <h2>Filmes</h2>
      <table class="table table-bordered table-hover">
        <thead class="thead-dark">
          <tr>
            <th class="changeth">Nome</th>
            <th class="changeth">Gênero</th>
            <th class="changeth">Possui DVD</th>
            <th class="dimas">Dimas</th>
            <th class="bruna">Bruna</th>
          </tr>
        </thead>
        <tbody id="tabela-pacientes">
          <tr class="filmes">
            <td class="info-nome">Invocação do Mal 1</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">A</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>

          <tr class="filmes">
            <td class="info-nome">Invocação do Mal 2</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">ZS</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>

          <tr class="filmes">
            <td class="info-nome">O Exorcista</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">AAAAA</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>

          <tr class="filmes">
            <td class="info-nome">Jogos Vorazes</td>
            <td class="info-genero">Ação/Ficção científica</td>
            <td class="info-dvd">Sim</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>
          <tr class="filmes">
            <td class="info-nome">A Hora do Pesadelo</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">Não</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>
          <tr class="filmes">
            <td class="info-nome">UM Príncepe em Nova York</td>
            <td class="info-genero">Comédia</td>
            <td class="info-dvd">Não</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>
          <tr class="total">
            <td></td>
            <td></td>
            <td></td>
            <td class="bg-success total">Total:</td>

            <td class="bg-dark info-total">0</td>
          </tr>

        </tbody>
      </table>
      <div class="container">
        <div class="row">
          <div class="col-6">
            <img class="avatar" src="img/bruna.png" alt="">
          </div>
          <div class="col-6">
            <img class="avatar" src="img/dimas.png" alt="dimas.png">
          </div>
    </section>
  </main>
  <footer>
    <div class="jumbotron jumbotron-fluid bg-dark">
      <h3 class="custom">Copyright @ Brumas</h3>
    </div>
  </footer>

  <script src="js/principal.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>

</html>

So far so good, only it only validates the first <td> the others it does not validate, if there is any error it passes straight, someone can help me?

show your html as well

– Vitor Ceolin

2020/10/21 at 20:14
Sorry!!! Thanks for the tip!!!

– dimascamillo

2020/10/21 at 20:18
Related: https://answall.com/questions/199218/addeventlistener-n%C3%A3o-%C3%A9-uma-fun%C3%A7%C3%A3o

– Luiz Felipe

2020/12/05 at 02:36

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Augusto Vasques • **15,321** points · Answer 1 · 2020-10-21T21:37:27+00:00

When you consult with selectors using Document.querySelector() is returned only first element within the document corresponds to the specified selector.
Because of this your code only operates on the first element whose class is .info-dvd.

To modify this behavior use Document.querySelectorAll() that instead of returning the first element Document.querySelectorAll() returns a list of all elements present in the document that match the specified selector group.

After obtaining the list of all elements whose class is .info-dvd, use a iteration loop or the method NodeList.prototype.forEach() to iterate through the list elements and perform the actions necessary to their business rule.

//Retorna a lista de todos os elementos que combinam com o critério de busca.
var dvd = document.querySelectorAll(".info-dvd");
//Para cada elemento retornado executa uma ação dependendo do seu conteúdo.
dvd.forEach((e) => {
  var dvdInfo = e.textContent;
  switch (dvdInfo) {  //Troquei os if por um controle de fluxo switch por questão de legibilidade
    case "Sim": //fall through case para dvdInfo == "Sim" || dvdInfo == "Não".
    case "Não":
                 console.log("tudo funcionando");
                 break;
    case "":
                 e.textContent = "O Campo não pode estar vazio!"
                 console.log("campo está vazio");
                 break;
    default:
                 e.textContent = "Preecha o campo com Sim ou Não";
                 console.log("campo invalido");
                 break;
  }
});

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Lista de Filmes Assistidos</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>
  <header>
    <div class="container">
      <h1>Listas de Filmes Assistidos</h1>
    </div>
  </header>
  <main>
    <section class="container">
      <h2>Filmes</h2>
      <table class="table table-bordered table-hover">
        <thead class="thead-dark">
          <tr>
            <th class="changeth">Nome</th>
            <th class="changeth">Gênero</th>
            <th class="changeth">Possui DVD</th>
            <th class="dimas">Dimas</th>
            <th class="bruna">Bruna</th>
          </tr>
        </thead>
        <tbody id="tabela-pacientes">
          <tr class="filmes">
            <td class="info-nome">Invocação do Mal 1</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">A</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>

          <tr class="filmes">
            <td class="info-nome">Invocação do Mal 2</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">ZS</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>

          <tr class="filmes">
            <td class="info-nome">O Exorcista</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">AAAAA</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>

          <tr class="filmes">
            <td class="info-nome">Jogos Vorazes</td>
            <td class="info-genero">Ação/Ficção científica</td>
            <td class="info-dvd">Sim</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>
          <tr class="filmes">
            <td class="info-nome">A Hora do Pesadelo</td>
            <td class="info-genero">Terror</td>
            <td class="info-dvd">Não</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>
          <tr class="filmes">
            <td class="info-nome">UM Príncepe em Nova York</td>
            <td class="info-genero">Comédia</td>
            <td class="info-dvd">Não</td>
            <td class="info-dimas">Sim</td>
            <td class="info-bruna">Sim</td>
          </tr>
          <tr class="total">
            <td></td>
            <td></td>
            <td></td>
            <td class="bg-success total">Total:</td>

            <td class="bg-dark info-total">0</td>
          </tr>

        </tbody>
      </table>
      <div class="container">
        <div class="row">
          <div class="col-6">
            <img class="avatar" src="img/bruna.png" alt="">
          </div>
          <div class="col-6">
            <img class="avatar" src="img/dimas.png" alt="dimas.png">
          </div>
    </section>
  </main>
  <footer>
    <div class="jumbotron jumbotron-fluid bg-dark">
      <h3 class="custom">Copyright @ Brumas</h3>
    </div>
  </footer>

  <script src="js/principal.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>

</html>