点击图像时的Javascript图像src

我正在尝试创建一个简单的图像交换程序。我在页面上有20张图片，还有一张大的。我希望用户点击20中的一个较小的图像，并将其输出到大图像源的位置

我刚刚开始，但即使如此，我的代码似乎也没有验证，因为脚本在到达

控制台.log

之前就失败了。也不确定我是否正确使用了

thisID

<img id='avatar-output' onclick='selectAvatar(thisID)' src='images/avatars/$number.png' />
<script>
    function selectAvatar(thisID){
        var imageSource = document.getElementById ("avatar-output").src;
        console.log("Avatar source is " imageSource);
    }
</script>

功能选择化身（此ID）{
var imageSource=document.getElementById（“化身输出”）.src；
console.log（“化身源是”imageSource）；
}

如果您有输入错误，请更改

var imageSource = document.getElementById ("avatar-output").src;

到

因为有一个不应该存在的空间

编辑：哦，还有另一个

console.log("Avatar source is " imageSource);

线路。在字符串和变量之间添加一个

+

，如下所示：

console.log("Avatar source is " + imageSource);

HTML:

注释

• 更好地分离内容（html）和行为（内联JS）

• 元素需要

  type=“text/javascript”

  属性
• 避免在全局范围内运行JavaScript以避免创建全局变量，从而污染

  窗口

  。在闭包中运行：

  （函数（）{/*code here*/}）（

---

@BaconJuice是的jQuery已经在页面上了。啊，好地方。然而，即使改变了，它仍然不起作用。现在，当我点击图标并说没有定义

selectAvatar（）

时，它崩溃了。它还说，

.src之后有一个意外的标识符console.log("Avatar source is " + imageSource);

<img id='avatar-output' src='images/avatars/$number.png' />
<img class='avatar-small' src='images/avatars/1.png' />
<img class='avatar-small' src='images/avatars/2.png' />
<img class='avatar-small' src='images/avatars/3.png' />

var els = document.getElementsByClassName('avatar-small'),
    target = document.getElementById("avatar-output"),
    handler = function() {   target.src = this.src;    };
for (var i=0; i<els.length; ++i) els[i].onclick = handler;

var target = document.getElementById("avatar-output");
document.getElementById("avatar-small-wrapper").onclick = function(e) {
    if(e.target.tagName.toLowerCase() === 'img')  target.src = e.target.src;
};