为什么点击后img src /图片没有变化？

Question

我正在尝试执行从Transition State 1到Transition State 2

的过渡状态

我用来完成这个JavaScript的技术，因为JavaScript可以动态地改变HTML元素的内容＆＃34; - JavaScript

这是JFiddle

我看到要更改html中图像标记的src，你必须执行这行代码（来自Change Img Src）

document.getElementById("imageid").src="../template/save.png";

以下是我更改图像部分的全部JavaScript代码（来自我的JFiddle）

(function() {
    alert("got here");
    function pageLoad() {   
        document.getElementById("choice1").onclick = getPicture("http://i.imgur.com/e95oMVZ.jpg");
        document.getElementById("choice2").onclick = getPicture("http://imgur.com/dOlZ19H");    
    }
    function getPicture(imageUrl) {
          document.getElementById("picture").src = imageUrl;
     }
    window.onload = pageLoad;
})();

我确保遵循JavaScript Arguments的约定，检查了我的ID，并编写了一个警告语句以确保JavaScript正在执行。

毕竟，当我点击choice2时，图像仍然没有改变......有谁知道问题是什么？

Answer 1

您需要将onclick设置为某个功能。您正在立即调用该函数，而不是在单击该元素时调用该函数。

function pageLoad() {   
    document.getElementById("choice1").onclick = function() {
        getPicture("http://i.imgur.com/e95oMVZ.jpg"); 
    };
    document.getElementById("choice2").onclick = function() { 
        getPicture("http://imgur.com/dOlZ19H"); 
    };
}