Show/Hide div based on the content of another div

Question

I am trying to make a div show/hide based on the content of another div. It's a simple thing, but I am new to JS and I just can't seem to figure it out. If the price is "Free", I want the "Dollar" To hide, if it's any number whatsoever, I want it to show.

So we have multiple divs that contain the same thing.

if (document.getElementsByClassName("bookPrice") != null) {
  var price = document.getElementsByClassName("price");

  var priceTag = document.getElementsByClassName("priceTag");

  if ((price.textContent = "Free")) {
    priceTag.style.display = "none";
  } else if (price.textContent != "Free") {
    priceTag.style.display = "block";
  }

}

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">Free</div>
</div>

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">60</div>
</div>

There's multiple instances of it, and I want them to react according to their own div, not as a whole. Any help is greately appreciated. Thank you.

score 1 · Answer 1 · answered Jun 02 '23 at 18:14

You can do something like this:

if (document.getElementsByClassName("bookPrice") != null) {
  const priceParent = document.querySelectorAll('.priceParent');
  
  priceParent.forEach((item) => {
    const priceTag = item.querySelector('.priceTag');
    const price = item.querySelector('.price');
    
    if (price.textContent === 'Free')
        priceTag.style.display = "none";
  });
}

<div class="priceParent">
<div class="priceTag">$</div>
<div class="price">Free</div>
</div>

<div class="priceParent">
<div class="priceTag">$</div>
<div class="price">60</div>
</div>

score 0 · Answer 2 · answered Jun 02 '23 at 18:00

I think the issue might be your variables. See, you had defined the price variable as: document.getElementsByClassName("price"), the variable will be turned into a list, as your code told the program to grab multiple items. Because of this, the way you wrote your if statement, it's checking the price variable as if it were a regular variable, not a list. What you may be able to do to fix this is adding a for loop that goes through all of the items in price list, and checking the index of each one for an equivalent value of "Free." This could work.

WOUNDEDStevenJones · Accepted Answer · 2023-06-02T18:28:17.690

getElementsByClassName() returns an array-like list that you'd need to iterate over in order to interact with each element. A similar function is querySelectorAll(), and here's an example of how to access the items that are selected: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#accessing_the_matches

The notable difference between the results of these 2 functions is that getElementsByClassName returns a live HTMLCollection, while querySelectorAll returns a static NodeList.

I also adjusted the display property to display the tag/price next to each other, and I added another class to toggle this via a CSS class rather than an inline style.

if (document.getElementsByClassName("bookPrice") != null) {
  let priceParents = document.querySelectorAll('.priceParent');
  
  priceParents.forEach((parent) => {
    let priceTag = parent.querySelector('.priceTag');
    let price = parent.querySelector('.price');
    
    if (price.textContent == "Free") {
      priceTag.classList.add('hidden');
    }
  });

}

.priceParent div {
  display: inline-block;
}

.priceTag.hidden {
  display: none;
}

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">Free</div>
</div>

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">60</div>
</div>

Thanks. The previous version of the code worked perfectly. The CSS was already done before, I just needed the programming. Thanks again. — Phardin, Jun 02 '23 at 18:37

Show/Hide div based on the content of another div

3 Answers3