Read html's data attribute using vanilla js

Question

why can't I get the value of the data-price attribute?

I want to get the data-price value, make conversions, and add it to the html markup I know how to do it in jquery, but not in js

JS code:

let btn = document.getElementById('btn');
let counter = document.getElementById('counter');

btn.addEventListener("click", function () {
    btn.getAttribute('data-price');
    counter.innerHTML = btn;
    console.log(btn);
});

HTML code:

<div class="card" style="width: 18rem;">
    <img src="img/img3.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <div  id="price" class="card__price">2499р</div>
        <a href="#" id="btn" data-price="2499" class="btn btn-primary">В корзину</a>
    </div>
</div>

Console:

<a href="#" id="btn" data-price="2499" class="btn btn-primary">В корзину</a>

It seems that you wanted to assign the value of the attribute before using it. Something like const price = btn.getAttribute('data-price'); — Shlang
– Shlang, Commented May 11, 2020 at 10:10

Barmar · Accepted Answer · 2020-05-11 09:45:55Z

3

btn is the element, not the value of the attribute.

You need to assign the result of getAttribute to a variable and use that in the innerHTML.

btn.addEventListener("click", function () {
    var btnValue = btn.getAttribute('data-price');
    counter.innerHTML = btnValue;
    console.log(btnValue);
});

answered May 11, 2020 at 9:45

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

Sameer · Accepted Answer · 2020-05-11 10:07:20Z

1

You can also use dataset property, can be access like this btn.dataset.price

Example

function myFunction(btn) {
  console.log(btn.dataset.price)
}

  <button onclick="myFunction(this)" data-price="1200">My Button</button>

answered May 11, 2020 at 10:07

Sameer

5,2263 gold badges27 silver badges47 bronze badges

Comments

Zuckerberg · Accepted Answer · 2020-05-11 09:57:54Z

0

getAttribute() returns the actual data-price attribute value.

let attribute = element.getAttribute(attributeName);

where

attribute is a string containing the value of attributeName.
attributeName is the name of the attribute whose value you want to get.

You need to the set counter.innerHTML to that value like:

const price = btn.getAttribute('data-price');
counter.innerHTML = price;
console.log(price);

edited May 11, 2020 at 9:57

answered May 11, 2020 at 9:46

Zuckerberg

2,1912 gold badges13 silver badges19 bronze badges

Collectives™ on Stack Overflow

Read html's data attribute using vanilla js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related