CODEWITHSUNDEEP
javascripthtmlanchor
user9871124
user9871124

Reputation:

How to get value of <a> tag in JavaScript

I have this code:

<html>
<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" href="value"><img src="b5.jpg"> values rule!!</a>
<p id="demo"></p>
<script>
var a = document.getElementsByTagName("a").value
function stups(){

document.getElementById("demo").innerHTML=a

}
</script>


</html>

The javascript is simply meant to get the value of th (link) when the button is clicked I don't even know what is supposed to be the value whether it is th href attribute, the value attribute ,the value of the img attribute or the text in between the two <a>and </a>,well I've tried EVERYTHING i could think of and it never gives me any value it keeps giving me the word undefined.Please help.

NB:I need that to be in between the <a></a> because it is a link

Thanks in advance

Upvotes: 8

Views: 51227

Answers (3)

BraveButter
BraveButter

Reputation: 1458

You need to define which attribute you need from the a tag.

So try .getAttribute('value') 

<html>
<button onclick="stups()">VALUE FINDER </button>
<a value="this is a value" href="value"><img src="b5.jpg"> values rule!!</a>
<p id="demo"></p>
<script>

function stups(){
   var a = document.getElementsByTagName('a')[0].getAttribute('value');
   document.getElementById("demo").innerHTML=a

}
</script>
</html>

Upvotes: 5

Takit Isy
Takit Isy

Reputation: 10081

First of all, take care of what you want to do, because .getElementsByTagName("a") will return you a collection of elements.

Then, you might want to use .getAttribute("value"):

var a = document.getElementsByTagName("a");

function stups(){
  document.getElementById("demo").innerHTML = a[0].getAttribute("value");
}
<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" href="value"><img src="b5.jpg"> values rule!!</a>
<p id="demo"></p>

⋅ ⋅ ⋅

If you want to manage multiple a elements, you could do the following:

  • Use a .querySelectorAll("a"), to be able to use a forEach loop directly,
  • .push() your values in an array,
  • Do what you want with your array.

var as = document.querySelectorAll("a");

function stups(){
  var values = [];
  as.forEach(function(a, index){
    values.push(a.getAttribute("value") || '--- no value ---');
    // OR: values.push(as[index].getAttribute("value"));
  })
  document.getElementById("demo").innerHTML = values.join('<br>');
}
<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" href="value"><img src="b5.jpg"> values rule!!</a>
<a value="this is another value" href="value"><img src="b5.jpg"> values rule!!</a>
<a href="value"><img src="b5.jpg">No value here</a>
<a value="this is another value, again" href="value"><img src="b5.jpg"> values rule!!</a>
<p id="demo"></p>

Hope it helps.

Upvotes: 12

Aplet123
Aplet123

Reputation: 35512

In these situations, MDN is your friend. You also shouldn't be copy-pasting code you don't understand. The src of the img points to whatever image is being displayed. The href of the a tag is the actual link. The text inside the a tag is what shows up. You should not be setting the value attribute of the a tag as it is non-standard and not needed. document.getElementsByTagName("a") returns an array of every a tag in the document. You need to specify the first link by running document.getElementsByTagName("a")[0]. You can get the link just by using .href. In the end, the stups function should look something like this:

function stups(){
    var a = document.getElementsByTagName("a")[0].href;
    document.getElementById("demo").innerHTML = a;
}

Upvotes: 0

Related Questions