Change div HTML content with attribute from button on click

Question

I have some data attributes on buttons that I need to send as content to a div when those buttons are clicked. A part of my code until now is this:

function getDiscount() {

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

  buttons.forEach(function(item, index) {
    item.addEventListener('click', function() {
      var discount = getDiscount(this);
    });
  });

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

<div class="discount__Topics">
<div><strong class="discount-amount">50</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">60</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>

I'm just not seeing how to change the html with attribute when it's clicked and how to have two sets of buttons or more on the same page.

Hope someone can help. Many thanks

UPDATE: Now the code is running properly but im having troubles with getting multiples div's with multiple buttons working. I've created a for.Each wic logs my div correctly but im not beeing able to have the working properly.

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>

FYI, your markup has a flaw. You're closing a span element with a strong tag. — isherwood
– isherwood, Commented Nov 4, 2022 at 13:26

flyingfox · Accepted Answer · 2022-11-05 01:14:01Z

5

You have defined two functions called getDiscount, it would be better to let them have different name

function init(){

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

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

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

init()

<div><span class="discount-amount"><strong>55</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>

Update: for your updated question,since it has multiple button groups and divs,so we need to sepereate them correctly.

One solution is to using index,change

let span = document.querySelector('.discount-amount')

to

let span = document.querySelectorAll('.discount-amount')[Math.floor(index/4)]

In my opinios,the best way is to let them have different id or class,so that we can query them easily.

function init(){

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

        buttons.forEach(function (item, index) {
            item.addEventListener('click', function(){    
                var discount = getDiscount(this);
                let span = document.querySelectorAll('.discount-amount')[Math.floor(index/4)]
                span.innerHTML = '<strong>' + discount+ '</strong>%'
                //span.innerHTML =discount.bold()+ '%' // we can use bold() instead
            });
        });

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

init()

<div class="discount__Topics">
<div><strong class="discount-amount">50</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">60</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>

edited Nov 5, 2022 at 1:14

answered Nov 4, 2022 at 13:20

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

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

6 Comments

kyllaz Over a year ago

Thanks it works great! I just have one more issue, what if i have more than one set of buttons on same page? I wrap my code in a new div and duplicated it. I've tried doing a forEach based on the class but no luck

flyingfox Over a year ago

@kyllaz I am going to sleep,can you post a new question? Or update your question,will see it tomorrow

kyllaz Over a year ago

Yes of course! See you tomorrow =)

flyingfox Over a year ago

@kyllaz,have updated my answer,you can check it now

kyllaz Over a year ago

Thanks @lucumt. The solution works great here but it's a bit limited for what i need. When i add it to my full code i get and error on the span.innerhtml, and this way if i have more buttons or div's it also stops working, isnt the any other way of working with ilimited number of divs and buttons? I've tried doing it with an array but it doesnt work properly, i can print the divs on console but it always change the first div elements. I'm going to update my code maybe it can be fixed. Thanks again for your help

|

General Grievance · Accepted Answer · 2023-05-26 16:58:04Z

0

If I understand your question correctly, you are looking for something like this.

var buttons = document.querySelectorAll(".form-button");
var discountRef = document.querySelector(".discount-amount");

function setDiscount(pointerEvent) {
    // get the clicked button from the pointerEvent
    var discount = pointerEvent.target.dataset.discount

    // add the discount to <span class="discount-amount"></span>
    discountRef.innerText = discount
}

buttons.forEach(function (item) {
    item.addEventListener('click', setDiscount);
});

edited May 26, 2023 at 16:58

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Nov 4, 2022 at 13:34

Robin Stut

283 bronze badges

Collectives™ on Stack Overflow

Change div HTML content with attribute from button on click

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related