Skip to content

Instantly share code, notes, and snippets.

@drumovski

drumovski/toDo2.css

Last active December 20, 2015 23:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drumovski/de927cd011fdb809ba05 to your computer and use it in GitHub Desktop.
Save drumovski/de927cd011fdb809ba05 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
toDo2.css
body {
background: lightgray;
}
.mouseon {
font-weight: bold;
/* color: green;*/
}
.strikeThrough {
text-decoration: line-through;
}
Raw
todo2.html
<!DOCTYPE html>
<html>
<head>
<title>toDo2</title>
<link rel="stylesheet" type="text/css" href="../css/toDo2.css">
</head>
<body>
<ul>
<li>Wash Cat</li>
<li>Feed Cat</li>
<li>Feed Cat to Dog</li>
</ul>
<script type="text/javascript" src="../js/toDo2.js"></script>
</body>
</html>
Raw
toDo2.js
var list = document.querySelectorAll("li");
// // This works: (solution provided by Colt)
// for (i = 0; i < list.length; i++) {
// list[i].addEventListener("mouseover",function(){
// this.classList.toggle("mouseon");
// });
// list[i].addEventListener("mouseout",function(){
// this.classList.toggle("mouseon");
// });
// list[i].addEventListener("click",function(){
// this.classList.toggle("strikeThrough");
// });
// }
// This Doesn't work:
for (i = 0; i < list.length; i++) {
list[i].addEventListener("mouseover",function(){
list[i].classList.toggle("mouseon");
});
list[i].addEventListener("mouseout",function(){
list[i].classList.toggle("mouseon");
});
list[i].addEventListener("click",function(){
list[i].classList.toggle("strikeThrough");
});
}
// This works without the for loop:
// list[0].addEventListener("mouseover",function(){
// list[0].classList.toggle("mouseon");
// });
// list[1].addEventListener("mouseover",function(){
// list[1].classList.toggle("mouseon");
// });
// list[2].addEventListener("mouseover",function(){
// list[2].classList.toggle("mouseon");
// });
// list[0].addEventListener("mouseout",function(){
// list[0].classList.toggle("mouseon");
// });
// list[1].addEventListener("mouseout",function(){
// list[1].classList.toggle("mouseon");
// });
// list[2].addEventListener("mouseout",function(){
// list[2].classList.toggle("mouseon");
// });
// list[0].addEventListener("click",function(){
// list[0].classList.toggle("strikeThrough");
// });
// list[1].addEventListener("click",function(){
// list[1].classList.toggle("strikeThrough");
// });
// list[2].addEventListener("click",function(){
// list[2].classList.toggle("strikeThrough");
// });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment