I have the following problem: I have some buttons named stripe_pro_new, stripe_pro_new2, stripe_pro_new3 etc. And I have 2 functions that return 2 attributes. How can I return the attribute of the button that I press? (current function return the attributes for "stripe_pro_new")
button example:
<button
id="stripe_pro_new"
name="pro_plan"
data-name="<?php echo __( 'Month' );?>"
data-price="<?php echo (float)$config->basic_pro_plan;?>"
class="btn stripe valign-wrapper">
<?php echo __( 'buy_now' );?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20,8H4V6H20M20,18H4V12H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path>
</svg>
</button>
functions that return the attribute stripe_pro_new:
function getDescription() {
var val = document.getElementById("stripe_pro_new").getAttribute("data-name");
return val;
}
function getPrice() {
var val1 = document.getElementById("stripe_pro_new").getAttribute("data-price");
return val1;
}
html
<button data-name="btn-1" data-price="price1">Button</button>
<button data-name="btn-2" data-price="price2">Button</button>
<button data-name="btn-3" data-price="price3">Button</button>
js
var buttons = document.querySelectorAll("button");
buttons.forEach(function (item, index) {
item.addEventListener('click', function(){
var description = getDescription(this);
var price = getPrice(this);
});
});
function getDescription(clicked_element) {
var val = clicked_element.getAttribute("data-name");
return val;
}
function getPrice(clicked_element) {
var val = clicked_element.getAttribute("data-price");
return val;
}