sigonasr2/DOM_Intro_Exercise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add solution

Browse Source
This commit is contained in:
Colt 2015-01-13 22:40:06 -08:00
parent ca07b4c73d
commit 953303acef
3 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app.js Normal file
View File

@ -0,0 +1,35 @@
var styleListElements = function(){
var list_items = document.querySelectorAll("div#essentials > ul > li");
for (var i = list_items.length - 1; i >= 0; i--) {
// for (initializer, condition, counter)
list_items[i].style.backgroundColor = "yellow";
list_items[i].addEventListener("click", selectItem);
}
};
var selectItem = function(event){
// console.log(this.innerHTML);
this.classList.add("selected");
document.querySelector("img").setAttribute("src","./images/" + this.innerHTML + ".jpeg");
};
var changeGreeting = function(){
var greeting_div = document.getElementById("greeting");
greeting_div.innerHTML = "Hello Planet earth!";
};
var resetButtonHandler = function() {
var list_items = document.querySelectorAll("li");
for (var i = list_items.length - 1; i >= 0; i--) {
list_items[i].className = "";
}
document.querySelector("img").setAttribute("src","./images/panic.jpeg");
};
var initialize = function(){
changeGreeting();
styleListElements();
document.querySelector("#reset").addEventListener("click",resetButtonHandler);
};
window.onload=initialize;

10
index.html
View File

@ -2,13 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<title>The DOM playground</title>
<style>
.selected{ font-weight: bold;}
</style>
<script>
console.log("JavaScript is alive");
</script>
<title>Le DOM playground</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" ></script>
</head>
<body>
<div id="greeting">

3
style.css Normal file
View File

@ -0,0 +1,3 @@
.selected {
text-decoration: line-through;
}