Как получить значение атрибута из HTML-тегов

Question

Я пытаюсь получить значение из тега HTML. Не сам текст, а значение атрибута. Что я делаю не так?

$('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>

Answer 1

Использование data-* это позволяет использовать любую строку. ех. data-value="hello". Это справедливо и универсально на любом элементе AFAIK. Метод JQuery использовать это .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>

Answer 2

labels не values, input и другие form элементов могут иметь значение. Таким образом, в вашем случае это функция jQuery attr, чтобы получать значения атрибутов. И нет необходимости в дополнительных скобках вокруг этого геттера.

$('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>

Answer 3

$('label').click(function() { 
    var value = $(this).attr('value'); 
}); 

Кроме того, я не думаю, что value является допустимым атрибутом на label элемента.

Без JQuery ...

Array.from(document.querySelectorAll('label')).forEach((label) => { 
    label.addEventListener('click',() => { 
     let value = label.getAttribute('value'); 
    }); 
}); 

Answer 4

Вы можете сделать, как это в чистом 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>