Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменить атрибут элемента при обращении к нему (https://javascript.ru/forum/events/54962-izmenit-atribut-ehlementa-pri-obrashhenii-k-nemu.html)

Zuko 08.04.2015 02:01

Изменить атрибут элемента при обращении к нему
 
Приветствую всех

Снова вопрос

Есть список ul, внутри него li-шки

Нужно сделать так, чтобы по клику по элементу списка менялся его класс. Не понимаю, как правильно обратиться.

function completeTodo() {
     
	 var opn = document.getElementsByTagName(li);
	 
	 if (opn.className != 'completed') {
        //liCompleted = true;
        opn.setAttribute('class', 'completed');
		
      } else {
        opn.setAttribute('class', 'opened');
		//liCompleted = false;
      }
      inputField.focus();
	
	
	
	
    }
	
	//Обработчик клика
    opn.addEventListener('click', completeTodo, false);
  }

ksa 08.04.2015 08:25

Цитата:

Сообщение от Zuko
Не понимаю, как правильно обратиться.

Начать нужно с полного тестового примера... ;)

Zuko 08.04.2015 11:15

Цитата:

Сообщение от ksa (Сообщение 365566)
Начать нужно с полного тестового примера... ;)

Кидаю в личку, кода много просто)

Хотя вообще здесь бы мне подошёл простой пример с кликом по любому элементу со сменой его цвета, например)

рони 08.04.2015 11:24

Zuko,
тут всё что вам нужно для создания кода https://learn.javascript.ru/event-delegation и главное понять что у NodeList opn нет свойств элемента className
addEventListener и прочих

ksa 08.04.2015 11:25

Цитата:

Сообщение от Zuko
Кидаю в личку

Нафик оно мне надо? :blink:
Цитата:

Сообщение от Zuko
Хотя вообще здесь бы мне подошёл простой пример

Вот его-то тебе и нужно сделать... ;) На нем можно будет показать какие-то варианты решения...

Zuko 08.04.2015 13:12

Цитата:

Сообщение от рони (Сообщение 365578)
Zuko,
тут всё что вам нужно для создания кода https://learn.javascript.ru/event-delegation и главное понять что у NodeList opn нет свойств элемента className
addEventListener и прочих

Всё равно тогда не пойму, как перебрать содержимое каждой li

Запустить цикл внутри массива?

Zuko 08.04.2015 13:19

Пробую вот так - всё равно не получается(

document.getElementById('todo-list').addEventListener("click", displayDate);

	function displayDate() {
		var target = event.target; // где был клик?

		if (target.tagName != 'li') return;
		
		alert('daw');
		li.setAttribute('class', 'karamba');
	}

рони 08.04.2015 13:39

Zuko,
html минимальный кнопочку run -- сделайте макет нормальный -- и event добавьте в функцию раз с ним работаите

Zuko 08.04.2015 13:51

Разобрался

document.getElementById('todo-list').addEventListener("click", todoDone);

	function todoDone() {
		var target = event.target; // где был клик?
		
		if (target.className == 'opened' && target.tagName == 'LI') { 
			target.className = 'completed';
			} else {		
		target.className = 'opened';
		}

рони 08.04.2015 13:59

Цитата:

Сообщение от Zuko
Разобрался

тогда проверьте свой код в firefox

Zuko 08.04.2015 14:04

Цитата:

Сообщение от рони (Сообщение 365603)
тогда проверьте свой код в firefox

Как раз сейчас проверил

В чем загвоздка?

Даже убрал
&& target.tagName == 'LI'
, всё равно класс не меняет =(

рони 08.04.2015 14:07

Цитата:

Сообщение от Zuko
В чем загвоздка?

Цитата:

Сообщение от рони
event добавьте в функцию раз с ним работаите

:(

Zuko 08.04.2015 14:09

Цитата:

Сообщение от рони (Сообщение 365607)
:(

Спасибо!


Часовой пояс GMT +3, время: 14:04.