CODEWITHSUNDEEP
javascripthtml
cbuch1800
cbuch1800

Reputation: 943

Can't access data from meta tags

I am trying to access the data which I am storing in <meta> tags using javascript, but for some reason the getAttribute() function is not working.

document.write("<p>")
document.write("Hello, world")
document.write("</p>")

var metatags = document.getElementsByTagName('meta[id="candidate1"]');
metatags.getAttribute("data-candidate")
document.write(metatags)
Here is my code:

<body>
  <h1>Testing 1, 2</h1>
  <meta id="candidate1" data-candidate="1">
  <meta id="candidate2" data-candidate="2">
</body>

The error produced is "Uncaught TypeError: metatags.getAttribute is not a function"

Does anyone know why this is not working or if there is a better way of accessing the data stored in the tag?

I am a complete novice to javascript so appreciate any tips you can give me.

Upvotes: 3

Views: 482

Answers (4)

klenium
klenium

Reputation: 2607

Don't do this! This is a very very bad practice!

<meta> tags are used for different things. They control the document (charset, viewport, RSS feed, etc), gives additional information about the page (social-media attributes, author, next page for robots, etc). User data and settings that you want to read from JavaScript shouldn't go here. There is way to pass any data to JS: put a script inside <head>, and set some global variables to anything you just want:

<head>
    <script>
        var candidate1 = 1;
        var candidate1 = 2;
    </script>
    <script src="your.js"></script>
</head>

You can easy access those values from your.js:

console.info(candidate1, candidate2);

As you can see, <meta> tags aren't needed. This gives more semantics to your code.

To your question:

You might read about getElementsByTagName and querySelector. The first is used to get all elements where the HTML tag name matches, the other is used with a CSS-like richer selector to get elements. You can't mix these. Hence, probably your metatags was null, so you could not call getAttribute on it.

Be careful using document.write! For debugging, use window.console. In real products, you should never use document.write.

Upvotes: 3

Ronit Mukherjee
Ronit Mukherjee

Reputation: 405

var metatags = document.getElementsByTagName('meta[id="candidate1"]'); this line is wrong. You should use querySelector to select by attribute.

document.write("<p>")
document.write("Hello, world")
document.write("</p>")

var metatags = document.querySelector('meta[id="candidate1"]');
var candidate = metatags.getAttribute("data-candidate");
document.write(metatags);
document.write("<br /> Candidate -", candidate,"<hr />");


//If you want the values of both then use this code
var metatags = document.getElementsByTagName('meta');

Array.prototype.forEach.call(metatags, function(metaTag) {
  var candidate = metaTag.getAttribute("data-candidate");
  document.write("<br /> Candidate -", candidate);
});
Here is my code:

<body>
  <h1>Testing 1, 2</h1>
  <meta id="candidate1" data-candidate="1">
  <meta id="candidate2" data-candidate="2">
</body>

Upvotes: 2

Adriano
Adriano

Reputation: 3934

By using the following code I was able to get the data you're looking for.

var metatags = document.getElementById('candidate1');
metatags.getAttribute("data-candidate");

See here:

document.write("<p>");
document.write("Hello, world");
document.write("</p>");

var metatags = document.getElementById('candidate1');
metatags = metatags.getAttribute("data-candidate");
document.write(metatags);
Here is my code:

<body>
  <h1>Testing 1, 2</h1>
  <meta id="candidate1" data-candidate="1">
  <meta id="candidate2" data-candidate="2">
</body>

Upvotes: 0

Sultan Khan
Sultan Khan

Reputation: 318

Try this

 var metatags = document.getElementsByTagName('meta');
        var data=metatags[0].getAttribute("data-candidate")
        document.write(data)

Upvotes: -1

Related Questions