How to get value of <a> tag in JavaScript
Question
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
3 answers
solution1
10 ACCPTED 2018-07-25 12:34:41
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 aforEachloop 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.
solution2
5 2018-07-25 12:29:08
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>
solution3
0 2018-07-25 12:34:07
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.