Inserir registros em várias Div's (for) getelementsbyclassname e js

[daviassumpcao 1]

Pessoal... Estou pegando 2 valores via class em divs e fazendo um cálculo para saber a porcentagem de desconto obtida (uma lista de registros). Porém, quando vou inserir o resultado em outras div's com class também, não funciona. Se eu mudo para id, é inserido na primeira div apenas. O identificador dessa div é a "desconto" que está com o fundo vermelho. É errado usar o getElementsByClassName para inserir os valores encontrados? Até tentei um for mas não rolou.... (sou iniciante em JS e isso é exercício estou fazendo) O script:

 

<div class="container">
  <div class="prateleira-wrap">
    <div class="prateleira-preco-de">De R$ 10,00</div>
    <div class="prateleira-preco-por">Por R$ 5,00</div>
    <div class="desconto"></div>
  </div>

  <div class="prateleira-wrap">
    <div class="prateleira-preco-de">De R$ 9,00</div>
    <div class="prateleira-preco-por">Por R$ 3,00</div>
    <div class="desconto"></div>
  </div>
</div>

.container{
  background-color:#e4e4e4;
  width:100%;
  height:auto;
  float:left;
}
.prateleira-wrap{
  border: 1px solid #000; 
  width:40%; 
  float:left;
  margin:10px;
}
.desconto{
  background-color:red;
  color:#fff;
  width:100%;
  height:20px;
  float:left;
}

function getMoney(str) {
             return str
                 .replace(/[^\d,]+/g, '') // Remove caracteres desnecessários.
                 .replace(',', '.');      // Troca o separador decimal (`,` -> `.`)
             }
             var a = document.getElementsByClassName("prateleira-preco-de")[0].innerHTML;
             var b = getMoney(a);
             var c = document.getElementsByClassName("prateleira-preco-por")[0].innerHTML;
             if ( c !== null) {
                 var d = getMoney(c);
                 var e = ((d / b) * 100) - 100;
                 var f = e.toFixed(2);
                 document.getElementsByClassName("desconto").innerHTML = ('Desconto de ' + f + '%');
                // console.log('Desconto de ' + f + '%');
             } else {
                 console.log("Não há desconto no preço do produto");
             }

 

 

 

[Omar~ 87]

2 horas atrás, daviassumpcao disse:

É errado usar o getElementsByClassName para inserir os valores encontrados?

Não pois isso apenas traz um array com todos elementos cujo possuam o classificador referente.

 

Mas vamos entender uma coisa antes:

Você busca por

2 horas atrás, daviassumpcao disse:

var a = document.getElementsByClassName("prateleira-preco-de")[0].innerHTML;

Lhe trará a estrutura HTML contida nesse primeiro item encontrado, mas enquanto a algum segundo ou terceiro elemento?

Assim como você mesmo colocou você possui 2 prateleira-preco-de.

Então o mais sensato seria buscar o elemento pai e através dele chegar até os filhos.

 

var _prateleira = document.getElementsByClassName('prateleira-wrap'), // Elemento pai
    _precoDe,
    _precoPor,
    _desconto,
    _precoDesconto;

for (var _i = 0; _i < _prateleira.length; _i++) {
    _precoDe = _prateleira[_i].children[0]; // prateleira-preco-de
    _precoPor = _prateleira[_i].children[1]; // prateleira-preco-por
    _desconto = _prateleira[_i].children[2]; // desconto

    _precoDesconto = calcularPreco(_precoDe.innerText, _precoPor.innerText);

    if (isNaN(_precoDesconto) == true) {
        _desconto.innerText = 'Não há desconto no preço do produto';
    } else {
        _desconto.innerText = 'Desconto de ' + _precoDesconto + '%';
    }
}

function calcularPreco(a, b) {
    var floatA = parseFloat(extrairPreco(a)),
        floatB = parseFloat(extrairPreco(b));
    return (((floatB / floatA) * 100) - 100).toFixed(2);
}

function extrairPreco(elemento) {
    return elemento.replace(/[^\d,]+/g, '').replace(',', '.');
}

 

[daviassumpcao 1]

@Omar~ Clara e objetiva sua resposta. Muito obrigado.... chegar aos filhos através do pai de fato (childrens) eu novo pra mim e show de bola, estou até buscando mais informações sobre isso. Deixa eu entender mais uma coisa nesse ponto da função.... (a e b) já vem na ordem que foi especificado lá em cima? _prateleira[_i].children[0]; e _prateleira[_i].children[1]; 

function calcularPreco(a, b) {
    var floatA = parseFloat(extrairPreco(a)),
        floatB = parseFloat(extrairPreco(b));
    return (((floatB / floatA) * 100) - 100).toFixed(2);
}

Muito obrigado novamente! 

[Omar~ 87]

children nada mais é que um array com o(s) filho(s) de algum elemento, então pegamos o texto contido nesse filho e enviamos para a função.

 

Então obtemos o primeiro e o segundo filho

12 horas atrás, Omar~ disse:

_precoDe = _prateleira[_i].children[0]; // prateleira-preco-de

_precoPor = _prateleira[_i].children[1]; // prateleira-preco-por

 

Definimos que o valor da variável será o retorno da função clacularPreco enviando o texto contido no filho[0] e no filho[1] 

12 horas atrás, Omar~ disse:

_precoDesconto = calcularPreco(_precoDe.innerText, _precoPor.innerText);

 

em calcularPreco a será o texto contido no filho[0] e b será o texto do filho[1]

 

 

[daviassumpcao 1]

2 horas atrás, Omar~ disse:

children nada mais é que um array com o(s) filho(s) de algum elemento, então pegamos o texto contido nesse filho e enviamos para a função.

 

Então obtemos o primeiro e o segundo filho

 

Definimos que o valor da variável será o retorno da função clacularPreco enviando o texto contido no filho[0] e no filho[1] 

 

em calcularPreco a será o texto contido no filho[0] e b será o texto do filho[1]

 

 

 

Show de bola demais! Muito obrigado.