Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2015, 02:01
Аспирант
Отправить личное сообщение для Zuko Посмотреть профиль Найти все сообщения от Zuko
 
Регистрация: 13.03.2010
Сообщений: 38

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

Снова вопрос

Есть список 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);
  }

Последний раз редактировалось Zuko, 08.04.2015 в 02:04.
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2015, 08:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от Zuko
Не понимаю, как правильно обратиться.
Начать нужно с полного тестового примера...
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2015, 11:15
Аспирант
Отправить личное сообщение для Zuko Посмотреть профиль Найти все сообщения от Zuko
 
Регистрация: 13.03.2010
Сообщений: 38

Сообщение от ksa Посмотреть сообщение
Начать нужно с полного тестового примера...
Кидаю в личку, кода много просто)

Хотя вообще здесь бы мне подошёл простой пример с кликом по любому элементу со сменой его цвета, например)
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2015, 11:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Zuko,
тут всё что вам нужно для создания кода https://learn.javascript.ru/event-delegation и главное понять что у NodeList opn нет свойств элемента className
addEventListener и прочих
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2015, 11:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от Zuko
Кидаю в личку
Нафик оно мне надо?
Сообщение от Zuko
Хотя вообще здесь бы мне подошёл простой пример
Вот его-то тебе и нужно сделать... На нем можно будет показать какие-то варианты решения...
Ответить с цитированием
  #6 (permalink)  
Старый 08.04.2015, 13:12
Аспирант
Отправить личное сообщение для Zuko Посмотреть профиль Найти все сообщения от Zuko
 
Регистрация: 13.03.2010
Сообщений: 38

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

Запустить цикл внутри массива?
Ответить с цитированием
  #7 (permalink)  
Старый 08.04.2015, 13:19
Аспирант
Отправить личное сообщение для Zuko Посмотреть профиль Найти все сообщения от Zuko
 
Регистрация: 13.03.2010
Сообщений: 38

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

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

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

		if (target.tagName != 'li') return;
		
		alert('daw');
		li.setAttribute('class', 'karamba');
	}
Ответить с цитированием
  #8 (permalink)  
Старый 08.04.2015, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Zuko,
html минимальный кнопочку run -- сделайте макет нормальный -- и event добавьте в функцию раз с ним работаите
Ответить с цитированием
  #9 (permalink)  
Старый 08.04.2015, 13:51
Аспирант
Отправить личное сообщение для Zuko Посмотреть профиль Найти все сообщения от Zuko
 
Регистрация: 13.03.2010
Сообщений: 38

Разобрался

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';
		}
Ответить с цитированием
  #10 (permalink)  
Старый 08.04.2015, 13:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Zuko
Разобрался
тогда проверьте свой код в firefox
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
autocomplete, обработка элемента списка при фокусе culver jQuery 12 29.06.2014 14:52
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
При наведении изменить scrolling в iframe zerg Элементы интерфейса 1 28.11.2009 19:56
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58