Javascript not recognized a variable within a function -

i'm trying create script can toggle images on , off clicking link practice. i'm trying select "data-" attribute when try define variable doesnt recognize it. gives me null error.

here html:

<a data-img="image1" id="ugur1" class="btn btn-default" href="#" role="button">toggle image one</a> <a data-img="image2" id="ugur2" class="btn btn-default" href="#" role="button">toggle image two</a> <a data-img="image3" id="ugur3" class="btn btn-default" href="#" role="button">toggle image three</a>  <img src="c:\users\ugur aydin\desktop\coding\javascript\images\image1.png" class="img-responsive img hide" id="ugurpic1" alt="responsive image" /> <img src="c:\users\ugur aydin\desktop\coding\javascript\images\image2.png" class="img-responsive img hide" id="ugurpic2" /> <img src="c:\users\ugur aydin\desktop\coding\javascript\images\image3.png" class="img-responsive img hide" id="ugurpic3" /> 

here js:

var ugur1 = document.getelementbyid("ugur1"); var ugur2 = document.getelementbyid("ugur2"); var ugur3 = document.getelementbyid("ugur3");  ugur1.addeventlistener("click", piclink); ugur2.addeventlistener("click", piclink); ugur3.addeventlistener("click", piclink);  function piclink() {     var picid = this.attributes["data-img"].value;     var pic = document.getelementbyid(picid);     if (pic.classname === "img-responsive img hide") {         pic.classname = "img-responsive img";     }     else {         pic.classname = "img-responsive img hide";     }; } 

can please show me i'm doing wrong? thank you.

you're selecting each a getelementbyid, , adding event listener properly. problem is, when select data-img attributes, don't contain ids of images. basically, on each change data-img="imagex" data-img="ugurpicx" reflect ids of image tags, or change ids of image tags.

---

either

<a data-img="ugurpic1" id="ugur1" class="btn btn-default" href="#" role="button">toggle image one</a> <a data-img="ugurpic2" id="ugur2" class="btn btn-default" href="#" role="button">toggle image two</a> <a data-img="ugurpic3" id="ugur3" class="btn btn-default" href="#" role="button">toggle image three</a> 

or (not both):

<img src="c:\users\ugur aydin\desktop\coding\javascript\images\image1.png" class="img-responsive img hide" id="image1" alt="responsive image" /> <img src="c:\users\ugur aydin\desktop\coding\javascript\images\image2.png" class="img-responsive img hide" id="image2" /> <img src="c:\users\ugur aydin\desktop\coding\javascript\images\image3.png" class="img-responsive img hide" id="image3" />