как получить текст внутри элемента li на клике в чистом JavaScript - PullRequest
Новая
       22

как получить текст внутри элемента li на клике в чистом JavaScript

0 голосов
/ 02 февраля 2019

Свернутый код работает ТОЛЬКО с методом getElementById, но мне нужно, чтобы он работал, даже если нет идентификатора элемента.

Мой HTML-код: 

<div id="container">
<ul class="menu">
<li>
<ul class="submenu">
<li>text i have to get</li>
</ul>
</li>
</ul>
</div>

Мой JS: 

<script>
var el = document.getElementById("pid");
el.onclick = function what_to_do(){
var theText = this.innerHTML;
alert(theText);
</script>

Поэтому мне нужно получить текст в самом глубоком вложенном элементе LI, который не имеет идентификатора, когда пользователь щелкает по нему.

обычно с помощью jquery, который я могу сделать$ ("# container ul li ul li"). on ("click, ... но я пытаюсь работать с чистым javascript (vanilla js). Кто-нибудь еще может мне помочь?

Спасибозаранее

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Вы можете использовать document.querySelectorAll().
Примечание : Вы не можете просто установить событие на document.querySelectorAll(), как jQuery, вам нужно перебирать весь массив 

const items = document.querySelectorAll('li > ul > li');
items.forEach(item => {
	item.addEventListener('click',(e)=>{
		console.log(e.target.textContent);
	}
	)
})
<div id="container">
	<ul class="menu">
		<li>
			<ul class="submenu">
				<li>text i have to get</li>
			</ul>
		</li>
	</ul>
</div>
0 голосов
/ 02 февраля 2019

использование document.querySelector

var el = document.querySelector("#container > .menu > li > .submenu > li");
el.onclick = function what_to_do(){
var theText = this.innerHTML;
alert(theText);
}
<div id="container">
<ul class="menu">
<li>
<ul class="submenu">
<li>text i have to get</li>
</ul>
</li>
</ul>
</div>
...