Unable to reference HTML values in Javascript

Question

I am building a Django app and need to do some Javascript processing in the HTML Template. In order to pass values from Django's templating language into Javascript, I have saved the values into meta tags as below:

<head>
    {% for candidate in candidates %}
        <meta id="cand" data-id="{{candidate.id}}" data-order="{{forloop.counter}}">
        <h3>{{forloop.counter}}</h3>
    {% endfor %}
</head>

I then try to access the data here:

<script type="text/javascript">

var metatags = document.getElementsByTagName('meta');
for (var i = 0; i < metatags.length; i++) {
    console.log(metatags[i].data-id)
}

</script>

However, an issue is thrown trying to access the data:

Uncaught ReferenceError: id is not defined

In reference to the line console.log(metatags[i].data-id)

Why is this not working, am I attempting something impossible, and is there a better or more elegant way of accessing template values in Javascript?

Thanks in advance.

Ids have to be unique, <h3> is not a valid child of <head> — Andreas
– Andreas, Commented Dec 4, 2017 at 11:10
Try to use the dataset property of the element to access your id like so: metatags[i].dataset.id — DavidDomain
– DavidDomain, Commented Dec 4, 2017 at 11:10
data-id is not a valid js identifier, it is parsed as data - id (variable "data" minus variable "id"). — bruno desthuilliers
– bruno desthuilliers, Commented Dec 4, 2017 at 11:21
and thsi has absolutely nothing to do with django FWIW (removed tags). — bruno desthuilliers
– bruno desthuilliers, Commented Dec 4, 2017 at 11:22

Muthu Kumaran · Accepted Answer · 2017-12-04 11:13:26Z

3

You have incorrect syntax for accessing HTML attributes using JavaScript.

Two ways to access data attributes,

Using dataset

console.log(metatags[i].dataset.id)

Learn more about dataset at MDN
Using getAttribute

console.log(metatags[i].getAttribute('data-id'))

answered Dec 4, 2017 at 11:13

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

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

Comments

DNKROZ · Accepted Answer · 2017-12-04 11:10:28Z

0

Try accessing the property like this:

 console.log(metatags[i].getAttribute("data-id"));

answered Dec 4, 2017 at 11:10

DNKROZ

2,9104 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

Unable to reference HTML values in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related