How get data-id value

Question

0.00/5 (No votes)

See more:

I have a few elements on the page
<div class="product" data-id="1">
<div class="product_pic" style="background: url('static/img/product-2.jpg') no-repeat; background-size: auto 100%; background-position: center"></div>
<span class="product_name">Воздушные шары</span>
<span class="product_price">100 руб.</span>
<button class="js_buy">Buy</button>
</div>
how click on button.js_buy I can get value from div.data-id and send it in form order opened to click this?

What I have tried:

let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
btnGoods[i].addEventListener('click', () => {
console.log(this.parentNode.getAttribute('data-id'));
});
}
I get undefined value in console...

Posted 26-Oct-19 6:46am

Михаил Вишневецкий

Updated 29-Oct-19 6:28am

Add a Solution

2 solutions

Solution 2

Quote:

JavaScript

let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
    btnGoods[i].addEventListener('click', () => {
        console.log(this.parentNode.getAttribute('data-id'));
    });
}

I get undefined value in console.

The problem is that you're using an arrow function[^] for the event listener. Arrow functions don't get their own this reference; they inherit it from the outer scope.

If you change your listener code to console.log(this);, you'll see that this is the global Window object.

You can either change your event listener to be a regular function:

JavaScript

let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
    btnGoods[i].addEventListener('click', function() {
        console.log(this.parentNode.getAttribute('data-id'));
    });
}

Or use the event object to find the target:

JavaScript

let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
    btnGoods[i].addEventListener('click', e => {
        var clickedButton = e.target || e.srcElement;
        console.log(clickedButton.parentNode.getAttribute('data-id'));
    });
}

Event.target - Web APIs | MDN[^]

Posted 29-Oct-19 6:28am

Richard Deeming

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Accepted Answer · 2019-10-26T12:05:00

You can try accessing it like this:

JavaScript

function myFunction() {
  var div = document.getElementsByTagName("div")[0].getAttribute("product"); 
  var id = div.getAttribute('data-id'); 
}

When using the approach above, you must need to know the index value of the div hierarchy in the page, otherwise you will get an unexpected behavior. So I personally won't recommend it.

If you want to use JavaScript, then you may need to set an id/name attribute for your div elements so you can easily reference them.

HTML

<div id="divProduct" class="product" data-id="1"> </div>

You can then get the value of data-id attribute like this:

JavaScript

<script>
function myFunction() {
  //reference the div
  var plant = document.getElementById('divProduct');
  //get the value of data-id attribute
  var id = plant.getAttribute('data-id'); //return 1
  
}
</script>

You can then call the myFunction() method by attaching an onclick event to your Button:

HTML

<button class="js_buy" onclick="myFunction();">Buy</button>

If you can use jQuery, then you can simply access DOM elements using selectors without the need to specify an id or name attribute or modify your HTML. For example:

JavaScript

<script>
$(".js_buy" ).click(function() {
  var id = $(".product").attr("data-id"); // will return the value 1
});
</script>

How get data-id value

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us