I'm trying to get the value from the HTML tag. Not the text itself, but the attribute value. What am I doing wrong?
$('label').click(function() {
$('p').text(($(this).val()));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label value="hello">click</label>
<p></p>labels don't have values, input and other form elements can have values. So in your case it is jQuery's attr function, to receive attribute values. And there is no need of the additional brackets around this getter.
$('label').click(function() {
$('p').text($(this).attr("value"));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label value="hello">click</label>
<p></p>Use data-* it allows you to use any arbitrary string. ex. data-value="hello". This is valid and universal on on any element AFAIK. The jQuery method to use is .data()
$('label').click(function() {
$('p').text($(this).data('value'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label data-value="hello">click</label>
<p></p>You may do like this in pure JS;
var lab = document.getElementsByTagName("label")[0],
pel = document.getElementsByTagName("p")[0];
lab.onclick = e => pel.textContent = e.currentTarget.getAttribute("value");<label value="hello">click</label>
<p></p>
$('label').click(function() {
var value = $(this).attr('value');
});
Also, I don't think value is a valid attribute on a label element.
Without jQuery...
Array.from(document.querySelectorAll('label')).forEach((label) => {
label.addEventListener('click', () => {
let value = label.getAttribute('value');
});
});
div elements only have global attributes
valueisn't valid attributes forlabel. Valid attributes arefor, the common Global attributes and custom data attribute (data-*)data-*it allows you to use any arbitrary string. ex.data-value="hello"data-*? Put it where value is? How would I get the value back in JQuery?[...]Description: Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.[...]