2

Tenho uma listagem de itens (que vem do banco de dados), preciso comparar cada item de um desses e se o valor for 0 mudar o texto. Abaixo está a função que estou tentando usar para trocar o valor do item.

function isFree(){
    var preco = document.getElementsByClassName('comprar');
    for(n = 0; n < preco.length; n++){
      var validaPreco = preco[n].innerHTML;
      if(validaPreco == '$ 0'){
        validaPreco = 'Grátis'
      }
    }
  }

Quando utilizo a linha document.getElementsByClassName('comprar')[0].innerHTML no console do navegador tenho retornado o valor que quero usar para comparar, porém quero comparar todos os itens que são trazidos do banco.

E esta é a linha de código onde aparece o preço

<a href="detalhe/{{item.id}}" onclick="subir()"><button class="comprar">$ {{item.originalValue}}</button></a>

Só para deixar claro, estou usando polymer 2, o elemento firebase-query para trazer os dados.

4
  • Não dá pra ligar ao evento change das caixas de texto que atualizam esses .comprar? No caso, se for o caso, a quantidade? <input type="text" id="qtd1" ... onchange="isFree()" /> Commented 12/06/2018 às 12:27
  • Eu acho que tem um equívoco no seu código, na linha onde está validaPreco = 'Grátis'; deveria ser preco[n].innerHTML = 'Grátis'; Commented 12/06/2018 às 12:32
  • Objetos são passados por referência, em JS, enquanto que propriedades com tipos primitivos são passados por valor. Quando você fez var validaPreco = preco[n].innerHTML, você só conseguiu usar preco[n] como se fosse o próprio objeto que ele guarda porque é uma representação de passagem por referência. preco[n].innerHTML, por sua vez, tem tipo String e é passado por valor. Commented 12/06/2018 às 12:37
  • 1
    Pois é, realmente deveria trocar o validaPreco por preco[n]. Grato pela ajuda e pela explicação. Commented 12/06/2018 às 12:49

1 Resposta 1

1

No seu código:

function isFree(){
    var preco = document.getElementsByClassName('comprar');
    for(n = 0; n < preco.length; n++){
      var validaPreco = preco[n].innerHTML;
      if(validaPreco == '$ 0'){
        validaPreco = 'Grátis'
      }
    }
  }

Você define o valor de validaPreco como "Grátis", mas isso não irá se refletir no DOM, pois validaPreco e preco[n].innerHTML são objetos diferentes, mesmo que um seja cópia do outro. O que você precisa fazer é modificar o objeto no DOM:

function isFree(){
    var preco = document.getElementsByClassName('comprar');
    for(n = 0; n < preco.length; n++){
      var validaPreco = preco[n].innerHTML;
      if(validaPreco == '$ 0'){
        preco[n].innerHTML = 'Grátis'
      }
    }
  }

Veja um exemplo:

function isFree() {
  var preco = document.getElementsByClassName('comprar');
  for (n = 0; n < preco.length; n++) {
    var validaPreco = preco[n].innerHTML;
    if (validaPreco == '$ 0') {
      preco[n].innerHTML = 'Grátis'
    }
  }
}

isFree();
<ul>
  <li class="comprar">$ 10,00</li>
  <li class="comprar">$ 0</li>
  <li class="comprar">$ 99,99</li>
  <li class="comprar">$ 0</li>
</ul>

1
  • Obrigado pela ajuda, funcionou. Era exatamente isso. Commented 12/06/2018 às 12:48

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 .