D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
KacieW
Full window
Github gist
JS Bin dog clicker // source https://jsbin.com/zomaxok
<!DOCTYPE html> <html> <head> <meta name="description" content="dog clicker"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style id="jsbin-css"> body{ font-family:"Verdana"; } .dog-image { display:none; } .dogList{ padding-left:5px; } .listItem{ margin:10px; } a{ text-decoration:none; font-size:1.1em; } .active{ display:block; } </style> </head> <body> <p>Click the dog name to see it!</p> <div class="dogList"> <div class="listItem"> <a href="#" id="1">Husky on grass</a> <!-- <img name="Husky on grass" src="https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg" alt="Husky-grass"> --> </div> <div class="listItem"> <a href="#" id="2">Husky watch</a> <!-- <img name="Husky watch" src="https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg" alt="Husky-watch"> --> </div> <div class="listItem"> <a href="#" id="3">Shiba Inu on grass</a> <!-- <img name="Shiba Inu on grass" src="https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg" alt="Shiba-Inu-grass"> --> </div> <div class="listItem"> <a href="#" id="4">Shiba Inu watch</a> <!-- <img name="Shiba Inu watch" src="https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg" alt="Shiba-Inu-watch"> --> </div> <div class="listItem"> <a href="#" id="5">retriver with sunglasses</a> <!-- <img name="Retriver with sunglasses" src="https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg" alt="retriver-sunglass"> --> </div> <div class="listItem"> <a href="#" id="6">retriver on grass</a> <!-- <img name="Retriver on grass" src="https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg" alt="retriver-grass"> --> </div> <div class="listItem"> <a href="#" id="7">Schnauzer in the rain</a> <!-- <img name="Schnauzer in the rain" src="https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg" alt="Schnauzer-rain"> --> </div> <div class="listItem"> <a href="#" id="8">Schnauzer in city</a> <!-- <img name="Schnauzer in city" src="https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg" alt="Schnauzer-city"> --> </div> </div> <p id="counter"></p> <div class="dogImages"> <img class="dog-image" name="Husky on grass" src="https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg" width="600px" alt="Husky-grass"> <img class="dog-image" name="Husky watch" src="https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg" width="600px" alt="Husky-watch"> <img class="dog-image" name="Shiba Inu on grass" src="https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg" width="600px" alt="Shiba-Inu-grass"> <img class="dog-image" name="Shiba Inu watch" src="https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg" width="600px" alt="Shiba-Inu-watch"> <img class="dog-image" name="Retriver with sunglasses" src="https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg" width="600px" alt="retriver-sunglass"> <img class="dog-image" name="Retriver on grass" src="https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg" width="600px" alt="retriver-grass"> <img class="dog-image" name="Schnauzer in the rain" src="https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg" width="600px" alt="Schnauzer-rain"> <img class="dog-image" name="Schnauzer in city" src="https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg" width="600px" alt="Schnauzer-city"> </div> <script id="jsbin-javascript"> var dogImages = document.getElementsByTagName('img'); var dogId = document.getElementsByTagName('a'); var count = 0; for (var i = 0; i < dogId.length; i++) { dogId[i].addEventListener('click', showImage); } function showImage() { for (var i = 0; i < dogImages.length; i++) { if (i == this.id - 1) { document.getElementById('counter').innerHTML=''; var dogName = this.text; var text = document.createTextNode(dogName); var t = document.getElementsByClassName('dogImages'); var p = document.createElement('p'); p.appendChild(text); t[0].insertBefore(p, dogImages[0]); dogImages[i].classList.add('active'); t[0].removeChild(t[0].childNodes[0]); dogImages[i].addEventListener('click', (function(countcopy){ return function(){ countcopy++; console.log(countcopy); document.getElementById('counter').innerHTML = 'Count is: '+countcopy; } })(count)); } else { dogImages[i].className = 'dog-image'; } } } </script> <script id="jsbin-source-css" type="text/css">body{ font-family:"Verdana"; } .dog-image { display:none; } .dogList{ padding-left:5px; } .listItem{ margin:10px; } a{ text-decoration:none; font-size:1.1em; } .active{ display:block; } </script> <script id="jsbin-source-javascript" type="text/javascript">var dogImages = document.getElementsByTagName('img'); var dogId = document.getElementsByTagName('a'); var count = 0; for (var i = 0; i < dogId.length; i++) { dogId[i].addEventListener('click', showImage); } function showImage() { for (var i = 0; i < dogImages.length; i++) { if (i == this.id - 1) { document.getElementById('counter').innerHTML=''; var dogName = this.text; var text = document.createTextNode(dogName); var t = document.getElementsByClassName('dogImages'); var p = document.createElement('p'); p.appendChild(text); t[0].insertBefore(p, dogImages[0]); dogImages[i].classList.add('active'); t[0].removeChild(t[0].childNodes[0]); dogImages[i].addEventListener('click', (function(countcopy){ return function(){ countcopy++; console.log(countcopy); document.getElementById('counter').innerHTML = 'Count is: '+countcopy; } })(count)); } else { dogImages[i].className = 'dog-image'; } } }</script></body> </html>