Can't access data from meta tags

user_8943079 0
Viewed 231

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.

html javascript
4 Answers

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.

user_26255610

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>

user_85665950

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>

user_46032950

Try this

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