Hide a div when a data-attribute as value of 0

Question

I have some buttons with data-attibutes that are passing to html when they are clicked. I'm not beeing able to hide the div of .discounts when the value inserted on the data-attibute is equal to 0. Here is my code:

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {

    var buttons = index.querySelectorAll(".form-button");

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){    
            var discount = getDiscount(this);
            let span = index.querySelector('.discount-amount')
            span.innerHTML = '<strong>' + discount+ '</strong>'
        });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");  
        return val;
    }

});

.discount__Topics {
margin-bottom:20px;
}

.discounts {
background-color: red;
color: white;
display: inline-flex;
margin-bottom:5px;
}

<div class="discount__Topics">
<div class="discounts"><strong class="discount-amount">38</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="38">Offer 1</button>
  <button class="form-button" data-discount="0">Offer 2</button>
  <button class="form-button" data-discount="22">Offer 3</button>
  <button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>

<div class="discount__Topics">
<div class="discounts"><strong class="discount-amount">12</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="12">Offer 1</button>
  <button class="form-button" data-discount="32">Offer 2</button>
  <button class="form-button" data-discount="0">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

Hope someone can help me. Many thanks

Can be done using a CSS selector or button[data-discount="0"]. — Christoph Dahlen
– Christoph Dahlen, Commented Nov 7, 2022 at 19:08
After the var discount, you can check there if the value returned in discount variable is 0. If it is, then you can change the style to display : none and if not proceed your way as you were. — Maverick
– Maverick, Commented Nov 7, 2022 at 19:12

Sean · Accepted Answer · 2022-11-07 19:19:25Z

1

You don't need to use JavaScript to hide an element with a specific data attribute value. You can just use a CSS attribute selector.

[data-discount='0'] {
  display: none;
}

[data-discount='0'] {
  display: none;
}

<p data-discount="38">Attribute is equal to 38</p>
<p data-discount="0"> Attribute is equal to 0 </p>
<p data-discount="12">Attribute is equal to 12</p>
<p data-discount="7"> Attribute is equal to 7 </p>

answered Nov 7, 2022 at 19:19

Sean

8,3875 gold badges30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kyllaz Over a year ago

I don't want to hide the button but the .discounts div

Sean Over a year ago

Are you adding the data attribute to the discounts div? If so, you can just change the selector to .discounts[data-discounts="0"]. If you're not adding the data attribute to the discounts div, I would reword your question to say "...value inserted from the..."

Alexis · Accepted Answer · 2022-11-07 19:10:12Z

0

To hide an element, you can simply do : element.style.display = "none".

So just add a condition to your JS where discount == 0 and then get the element by a query selector for your .discounts to finally change it's display style :)

Hope it helps ! Good luck !

answered Nov 7, 2022 at 19:10

Alexis

4324 silver badges13 bronze badges

Comments

Amirhossein Sefati · Accepted Answer · 2022-11-07 19:13:18Z

This code does the work for you (it is working for the first span, just do it in the same way for the other span too):

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {

    var buttons = index.querySelectorAll(".form-button");

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){    
            var discount = getDiscount(this);
            let span = index.querySelector('.discount-amount')
            if (discount!=0){  
                 document.getElementById("firstDiscount").style.display = "inline-flex"
                 span.innerHTML = '<strong>' + discount+ '</strong>'
               }else{
                   
                 document.getElementById("firstDiscount").style.display = "none"
               }
            });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");  
        return val;
    }

});

.discount__Topics {
margin-bottom:20px;
}

.discounts {
background-color: red;
color: white;
display: inline-flex;
margin-bottom:5px;
}

<div class="discount__Topics">
<div id="firstDiscount" class="discounts"><strong class="discount-amount">38</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="38">Offer 1</button>
  <button class="form-button" data-discount="0">Offer 2</button>
  <button class="form-button" data-discount="22">Offer 3</button>
  <button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>

<div class="discount__Topics">
<div id="secondDiscount" class="discounts"><strong class="discount-amount">12</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="12">Offer 1</button>
  <button class="form-button" data-discount="32">Offer 2</button>
  <button class="form-button" data-discount="0">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

kyllaz · Accepted Answer · 2022-11-07 19:48:09Z

Managed to do it with:

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {

    var buttons = index.querySelectorAll(".form-button");

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){    
            var discount = getDiscount(this);
            let span = index.querySelector('.discount-amount')
            span.innerHTML = '<strong>' + discount+ '</strong>'
              if (discount !=0){  
                   index.querySelector(".discounts").style.display = "inline-flex"
                 } else {
                   index.querySelector(".discounts").style.display = "none"
              }
            });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");  
        return val;
    }

});

.discount__Topics {
margin-bottom:20px;
}

.discounts {
background-color: red;
color: white;
display: inline-flex;
margin-bottom:5px;
}

<div class="discount__Topics">
<div class="discounts"><strong class="discount-amount">38</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="38">Offer 1</button>
  <button class="form-button" data-discount="0">Offer 2</button>
  <button class="form-button" data-discount="22">Offer 3</button>
  <button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>

<div class="discount__Topics">
<div class="discounts"><strong class="discount-amount">12</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="12">Offer 1</button>
  <button class="form-button" data-discount="32">Offer 2</button>
  <button class="form-button" data-discount="0">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

Collectives™ on Stack Overflow

Hide a div when a data-attribute as value of 0

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related