Show different content for each div on javascript manipulation

November 7, 2022

I’m changing some html via data-attribute on a button click, it works fine when there’s only a div but when i have more than one div or multiple buttons inside of each div it only changes on the first element. I’ve tried to do a forEach but without sucess. On my console i can see the two div’s but i can’t get it to work by div. Here’s my code:

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

discounters.forEach((index) => {
    console.log(index)

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

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

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

});

<div class="discount__Topics">
<div><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="50">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><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="44">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

Hope someone can help.
Many thanks

>Solution :

The querySelector for the spann will find the first since you’re look at document.

You could use the index variable to search the discount-amount inside the current discounter:

let span = index.querySelector('.discount-amount')
span.innerHTML = '<strong>' + discount+ '</strong>'

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

discounters.forEach((index) => {
    console.log(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;
    }

});

<div class="discount__Topics">
<div><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="50">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><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="44">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>