How to take the value of multiple items and change according to my if

Asked

Viewed 48 times

2

I have a list of items (that comes from the database), I need to compare each item of one of these and if the value is 0 change the text. Below is the function I’m trying to use to change the value of the 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'
      }
    }
  }

When I use the line document.getElementsByClassName('comprar')[0].innerHTML in the browser console I have returned the value I want to use to compare, but I want to compare all the items that are brought from the database.

And this is the code line where the price appears

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

Just to be clear, I am using Polymer 2, the firebase-query element to bring the data.

javascript function for binding polymer

  • You can’t call the event change of the text boxes updating these .comprar? In the case, where appropriate, the quantity? <input type="text" id="qtd1" ... onchange="isFree()" />

  • I think there’s a misconception in your code, on the line where it is validaPreco = 'Grátis'; should be preco[n].innerHTML = 'Grátis';

  • Objects are passed by reference, in JS, while properties with primitive types are passed by value. When you did var validaPreco = preco[n].innerHTML, you just managed to use preco[n] as if it were the very object he keeps because it is a passing representation by reference. preco[n].innerHTML, in turn, it has String and is passed by value.

  • 1

    That’s right, you really should exchange the validationPreco for the price[n]. Thanks for the help and the explanation.

1 answer

1


In your code:

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'
      }
    }
  }

You set the value of validaPreco as "Free", but this will not be reflected in the DOM, because validaPreco and preco[n].innerHTML are different objects, even if one is a copy of the other. What you need to do is modify the object in the 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'
      }
    }
  }

Take an example:

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>

  • Thanks for the help, it worked. That’s exactly what it was.

Browser other questions tagged javascript function for binding polymer

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