Форум

samp · #1 (**permalink**) 29.09.2016, 15:12

Добрый день.
У меня не работает Function(event).
Пытаюсь привязать функцию, при нажатии на какой-либо из элементов списка, нашим li будет добавляться либо убираться класс .done
к сожалению, не выходит

Просьба к более опытным товарищам помочь

имеется вот такой js(могу скинуть html) :

var todo = document.getElementById('todo'); //наш ul

		todo.onclick = function(event) {
			var target = event.target;
			if(target.tagName != 'li') {
				return;
			} else {
				toToggle(target);
			}
		}


function toToggle() {
				this.classList.toggle('done');
}

рони · #2 (**permalink**) 29.09.2016, 16:42

samp,
https://learn.javascript.ru/event-delegation

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .done {
    background-color: #FF00FF;
  }

  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var todo = document.getElementById("todo");
    todo.addEventListener("click", function(event) {
        event.preventDefault();
        var target = event.target;
        while (target != todo) {
            if (target.tagName == "LI") {
                target.classList.toggle("done");
                break
            }
            target = target.parentNode
        }
    })
});
  </script>
</head>

<body>
<ul id="todo">
  <li><a href="home.htm">Home</a></li>
  <li><a href="products.htm">Products</a></li>
  <li><a href="services.htm">Services</a></li>
  <li><a href="about.htm">About Us</a></li>
  <li><a href="contact.htm">Contact</a></li>
</ul>

</body>
</html>

ksa · #3 (**permalink**) 29.09.2016, 16:47

Сообщение от samp

Просьба к более опытным товарищам помоч

Сначала нужно делать тестовые примеры нормальные...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.done {
	color: red;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul id='todo'>
	<li>Item 0</li>
	<li>Item 1</li>
</ul>
<script type='text/javascript'>
var o = document.getElementById('todo'); 
o.onclick = function(event) {
	var target = event.target||event.srcElement;
	if (target.tagName == 'LI') {
		toToggle(target);
	};
};
function toToggle(Obj) {
	Obj.className=(Obj.className=='done')? '': 'done';
}
</script>
</body>
</html>

warren buffet · #4 (**permalink**) 29.09.2016, 18:17

Все у него правильно, кроме этого

Сообщение от samp

this.classList.toggle('done');

Зачем this, если передается элемент. Его и бери

function toToggle(el) {el.classList.toggle('done');}

Ну, и смысл этой функции не ясен. Тогда уж toggleDone(){}

Форум

Справочник

Discord чат

Курсы javascript