Issue
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
Solution
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>
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>
Answered By - lucumt
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.