I can’t get content (number) of some tags read

Asked

Viewed 171 times

0

The idea is to take a sequence of values arranged in li’s that share the same class, convert to integer, add to then perform a conditional test.

I’m using document.getElementsByClassName(nomedaclasse) (have already said that there is newer instruction to use). Apparently it is not a vector that is returned, because appears Htmlcollection, already tried document.getElementsByClassName(nomedaclasse).value, but returns Undefined.

Follow down what I’ve been trying:

@font-face{
  font-family: 'FonteSite';
  src: url("../_fonts/product-sans/product-sans-regular.ttf ");
}

body {
  font-family: FonteSite, sans-serif;
  margin: 0px;
  padding: 0px;
  
}

.header {
  margin: 0 auto;
  margin-top: 20px;
  width: 40%;
  height: 180px;
  background-color: #ccc;
  position: relative;
}

/*inputs*/
.text {
  margin-top: 10px;
}

.situacao {
  position: absolute;
  width: 100px;
  height: 20px;
  margin-right: 5px;
  border: 1px solid tomato;
  background-color: white;
  border-radius: 5px;
}

.km_trocadeoleo {
  right: 5px;
  top: 10px;
}

.km_alinhamento {
  right: 5px;
  top: 40px;
}

.result_revisao {
  right: 5px;
  top: 70px;
}

.container {
  margin: 0 auto;
  width: 40%;
  height: 600px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.data {
  width: 40%;
  height: 60%;
  padding-left: 5px;
  background-color: #ccc;
  max-width: 100px;
}

.servico {
  width: 40%;
  height: 60%;
  padding-left: 5px;
  background-color: #ccc;
  max-width: 200px;
} 

.km_final {
  width: 40%;
  height: 60%;
  padding-left: 5px;
  background-color: #ccc;
  max-width: 150px;
}

li {
  list-style: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="_css/style.css">
  <title>Controle de revisão de veículo</title>
</head>

<body>
  <div class="header">
    <label for="km_tdo">KM troca de óleo:</label><input class="text" type="text" name="km_tdo" id="km_tdo" autofocus data-rule-required="true"/><button type="button" onclick="estadoAtual()">Ok</button><div class="situacao km_trocadeoleo" id="km_trocadeoleo"></div><br>
    <label for="km_alin">KM alinhamento:</label><input class="text" type="text" name="km_alin" id="km_alin" data-rule-required="true"/><button type="button">Ok</button><div class="situacao km_alinhamento"></div><br>
    <label for="revisao">Revisão:</label><input class="text" type="text" name="revisao" id="revisao" data-rule-required="true"/><button type="button">Ok</button><div class="situacao result_revisao"></div>
  </div>
  
  <div class="container">
    <div class="data">
      <span style="font-weight: 500; padding-left: 25px">Data</span><br>
      01/01/2019 
      01/01/2019 
      01/15/2019 
      01/23/2019 
      01/30/2019 
      02/27/2019
      03/12/2019
      03/28/2019
      04/15/2019
      04/29/2019
      05/21/2019
    </div>
    <div class="servico">
      <span style="font-weight: 500; margin-left: 50px">Serviço</span><br>
      TROCA DE OLEO	
      ALINHAMENTO<br>	
      REVISÃO<br>	
      REVISÃO<br>	
      TROCA DE OLEO	<br>
      TROCA DE OLEO	<br>
      TROCA DE OLEO	<br>
      ALINHAMENTO	<br>
      ALINHAMENTO	<br>
      REVISÃO	<br>
      TROCA DE OLEO	
      ALINHAMENTO	
    </div>
    <div class="km_final">
      <span style="font-weight: 500; margin-left: 25px;">KM Final</span><br>
      <ul id="teste">
        <li class="km_tdo_realizada">10</li>
        <li>7</li>
        <li>20</li>
        <li>15</li>
        <li class="km_tdo_realizada">20</li>
        <li class="km_tdo_realizada">20</li>
        <li class="km_tdo_realizada">10</li>
        <li>15</li>
        <li>11</li>
        <li>20</li>
        <li class="km_tdo_realizada">30</li>
        <li>10</li>
      </ul>
    </div>
  </div>
  
  <script>
    function estadoAtual(){
      
      var valorEntradaKM = document.getElementById("km_tdo").value;
      var km_acumulada_tdo = document.getElementsByClassName('km_tdo_realizada');
      
      
/*
      if(valorEntradaKM >= 0 && valorEntradaKM <= 5){
        document.getElementById("km_trocadeoleo").style.backgroundColor="green";
    
      }*/
    }
    
  </script>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

javascript html dom objects

2 answers

3


getElementsByClassName is the correct way to recover the DOM elements, there is no more modern form, there are alternative forms, usually offered by an external library.

Like li is not an element that has value, you need to retrieve the text through the property innerText or innerHTML, then turn those values into numbers, and then add them up.

Example:

//recupero os elementos e transformo num array
var km_acumulada_elem = Array.from(document.getElementsByClassName('km_tdo_realizada'));
//recupero o texto dos elementos e converto para numérico
var km_acumulada_num = km_acumulada_elem.map(e => parseFloat(e.innerText));
//somo os resultados
var km_acumulada_tdo = km_acumulada_num.reduce((acc, i) => acc + i);

Or in just one step:

var km_acumulada_tdo = [].reduce.call(document.getElementsByClassName('km_tdo_realizada'), (acc, e) => acc + parseFloat(e.innerText), 0)

2

There is the querySelectorAll. The advantage of this to the getElementsByClassName is that it accepts CSS selectors, making the selection of elements more flexible.

Like the getElementsByClassName returns a collection of elements, you need to specify an index (as in an array) in order to select the element within the collection.

In doing document.getElementsByClassName(nomedaclasse).value returns undefined because you did not specify which element within the collection you want to take the value, and this is done through an index. For example, to catch the value of the first element of the collection, use the index [0]:

document.getElementsByClassName(nomedaclasse)[0].value

If you want to change all the elements of the collection returned by getElementsByClassName, you need to go through one by one of these elements using a loop, which can be a for simple:

const elementos = document.getElementsByClassName("km_tdo_realizada");
for(let x = 0; x < elementos.length; x++){
   elementos[x].style.backgroundColor = "green";
}

Browser other questions tagged javascript html dom objects

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