Как получить текст при нажатии на элемент списка?
Мне нужно получать текст Title-1 или Title-2 каждый раз, когда я нажимаю на соответствующий <li>. Ниже моя попытка, которая не работает.
<ul id = "playlist">
<a onclick = "loadSong(); get_text();"><li>Tilte-1</li></a>
<a onclick = "loadSong(); get_text();"><li>Title-2</li></a>
</ul>Как я могу этого добиться?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Передать текущий элемент, передав this в функцию get_text(this):
// Mocking this function.
function loadSong() {
// Stuff
}
// Add a parameter which.
function get_text(which) {
// Use which.innerHTML to access the content.
console.info(which.innerHTML.trim());
}<ul id = "playlist">
<li><a onclick = "loadSong(); get_text(this);">Tilte-1</a></li>
<li><a onclick = "loadSong(); get_text(this);">Title-2</a></li>
</ul>Примечание: У вас должен быть <li> как прямой потомок <ul>, а не <a>. Я изменил его для вас.
Примечание: Другим лучшим способом является передача контента на <a> с использованием атрибутов данных HTML5. Что-то типа:
<a data-title = "Hello World">
Перед использованием textContent прочтите: Келли Нортон: innerText против textContent
Я не могу их изменить!, потому что, если я это сделаю, приписанная им ссылка будет касаться только <a>, а не <li>
@Mchich Кроме этого, это работает?
Любая причина для понижения?
Еще один хороший подход — выполнять логику JavaScript только в JavaScript.
var playlist = document.getElementById("playlist");
var playlist_items = playlist.children;
for (var i = 0; i < playlist_items.length; i++) {
playlist_items[i].onclick = function() {
console.info(this.children[0].innerText);
}
}<ul id = "playlist">
<a><li>Tilte-1</li></a>
<a><li>Title-2</li></a>
</ul>что, если я захочу что-то подобное, это будет легко, нет?
<скрипт> function myFunction() { var x = document.title; document.getElementById("демо").innerHTML = x; } </скрипт> <скрипт>
да, это будет работать очень легко!
Вы можете сделать что-то вроде этого, которое использует делегирование событий:
function clickHandler(e) {
console.info(e.target.textContent);
}
document.querySelector('ul').addEventListener('click', clickHandler);<ul id = "playlist">
<li>Tilte-1</li>
<li>Title-2</li>
</ul>Причина понижения? Я хотел бы скорректировать свой ответ, если для этого была веская причина.
<ul id = "playlist">
<li><a onclick = "loadSong(); get_text(this);">Tilte-1</a></li>
<li><a onclick = "loadSong(); get_text(this);">Title-2</a></li>
</ul>
<p id = "demo"></p>
<script>
function get_text(which) {
var x = document.title;
document.getElementById("demo").innerHTML = x;
}
</script>что-то вроде этого
Самый простой способ:
<ul id = "playlist">
<a href = "#" onclick = "loadSong(); get_text(this)"><li>Tilte-1</li></a>
<a href = "#" onclick = "loadSong(); get_text(this)"><li>Title-2</li></a>
</ul>
function loadSong() {
console.info('song');
}
function get_text(e) {
console.info(e.innerText);
}
На мой взгляд, лучшим способом было бы разместить данные в
data-*, таком какdata-title. в противном случае используйтеe.target.textContent