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

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 >
<div ><strong >38</strong>%</div>

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

<div >
<div ><strong >12</strong>%</div>

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

Hope someone can help me. Many thanks

CodePudding user response：

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>

CodePudding user response：

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 !

CodePudding user response：

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 >
<div id="firstDiscount" ><strong >38</strong>%</div>

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

<div >
<div id="secondDiscount" ><strong >12</strong>%</div>

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

CodePudding user response：

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 >
<div ><strong >38</strong>%</div>

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

<div >
<div ><strong >12</strong>%</div>

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