Javascript 无法识别函数中的变量

>我正在尝试创建一个脚本，该脚本可以通过单击练习链接来打开和关闭图像。我正在尝试选择一个"data-"属性，但是当我尝试将其定义为变量时，它无法识别它。它给了我空错误。

这是我的 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" />

这是我的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";
    };
}

有人可以告诉我我做错了什么吗？谢谢。