Как отловить событие при клике и нажатии клавиши?

Question

[Роман]

Всем привет. Учу Js. Нужно сделать, чтобы при клике на любой li к его тексту добавлялась 1 если при клике была нажата клавиша ctrl. Если нажата была Shift, то добавить к тексту цифру 2. Но у меня что то не получается. Помогите найти ошибку.

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

let ul = document.querySelector('#elem');
ul.addEventListener('click', function(event){
	if (event.target.tagName == "LI") {
		let li = ul.querySelectorAll('li');
		for (elem of li) {
			elem.addEventListener('keydown', function(event2){
				if (event2.ctrlKey) {
					this.innerHTML += '1';
				}
				if (event2.ShiftKey) {
					this.innerHTML += '2';
				}
			});	
		};
	}
});

Answer 1

[Stalker_RED]

ShiftKey cо строчной.
второй обработчик не нужен, можно оба модификатора проверять в одном.
и осторожнее с innerHTML, модифицируя innerHTML вы рискуете сломать какие-то другие скрипты.

Comments

[Роман]

и осторожнее с innerHTML, модифицируя innerHTML вы рискуете сломать какие-то другие скрипты.

А как тогда менять текст?

[Anton Semenov]

Роман, используй appendChild

[Stalker_RED]

Роман, если ты уверен, что там именно текст, то можно и через innerHTML и даже через textContent
но textContent сломает html, если он есть. а innerHTML убъет все js- обработчики, если они есть, т.к. он перезапишет html же.

Answer 2

[Данил Шитов]

на jquery все просто

$("#elem li").on("click",function(e){
 if(e.ctrlKey){
   $(this).append(1);
}
  if(e.shiftKey){
     $(this).append(2);
 }
})

Comments

[Роман]

Я учу js, нужно самому научиться, а потом пользоваться библиотеками))

[Данил Шитов]

эм, тоже самое

[Rerurk]

Данил Шитов, ради этого грузить jquery?