I'm trying to get 2 values from the link
<a onclick="rev()" href="track_path">
<span id="name">username</span> - <span id="track">track_name</span>
</a>
<script>
function rev() {
var username = document.getElementById("name").value;
var track = document.getElementById("track").value;
return alert (username);
}
</script>
But when alert comes, it writes UNDEFINED....What is wrong?
.value is only use to take values of input, select or textarea fields. For html tags you need to use .innerHTML.
Change the script to this:
<script>
function rev(){
var username = document.getElementById("name").innerHTML;
var track = document.getElementById("track").innerHTML;
return alert (username);
}
</script>
Accodring to w3schools defintion:
The value property sets or returns the value of the value attribute of a text field.
So try using innerHTML or textContent instead:
var username = document.getElementById("name").innerHTML;
or
var username = document.getElementById("name").textContent;
value refers to the value of an input element, while innerHTML refers to the HTML inside an element. This is an example :
<input type="text" value="foo" id="input">
<div id="div">foo</div>
In the first case you have an input, so you need to use document.getElementById("input").value, while in the second case you need to use document.getElementById("div").innerHTML.
Remember that if you have to get a value from an element in Javascript outside a function, it's better to use window.onload to make sure the elements are recognized by Javascript.
In your case, you must so use this script :
function rev() {
var username = document.getElementById("name").innerHTML;
var track = document.getElementById("track").innerHTML;
return alert (username);
}
valuewhen you should be usinginnerHTML/innerText..valuewill get the string assigned tovalueattribute, not what you want here. Use.textContent. Andtrimit.