将图像源传递给 <img> 按钮点击事件

Question

我正在获取用户ID，并将用它来显示用户图像。 为此，我想在用户点击按钮时设置img路径。 HEre是代码：

HTML：

<img id="i1" style="display:none" src="" > </img>
<button typye="submit"  onclick="CallAfterLogin()"> Show image </button>

JS：

function CallAfterLogin() {
   var path = "http://thestylishdog.com/wp-content/uploads/2009/07/cute-dog2.jpg";
   document.getElementbyID(i1).src = path;
   document.getElementbyID(i1).display = "block";
}

小提琴：

http://jsfiddle.net/karimkhan/qeyRK/2/

怎么了？

Answer 1

以下是处理程序的语法正确版本：

function CallAfterLogin() {
    var path = "http://thestylishdog.com/wp-content/uploads/2009/07/cute-dog2.jpg";

    var imgEl = document.getElementById("i1");

    imgEl.src = path;
    imgEl.style.display = "block";
}

然而，真正的技巧是JSFiddle。 您必须查看Frameworks和Extensions并从onLoad切换到No wrap - in <body> ，如本答案中所述。

这是一个有效的JSFiddle： http ： //jsfiddle.net/PpbnG/2/

Answer 2

这应该解决它：

用document.getElementById（“i1”）替换document.getElementbyID（i1）
将document.getElementbyID（i1）.display替换为document.getElementById（“i1”）。style.display

全功能：

function CallAfterLogin() {
   var path = "http://thestylishdog.com/wp-content/uploads/2009/07/cute-dog2.jpg";
   document.getElementById("i1").src = path;
   document.getElementById("i1").style.display = "block";
}

Answer 3

function CallAfterLogin(){
        var path="http://thestylishdog.com/wp-content/uploads/2009/07/cute-dog2.jpg";
        document.getElementById("i1").src=path;
        document.getElementById("i1").style.display="block";
        }

Answer 4

如果你只是在按钮上添加onclick事件会更容易吗？

onclick="document.getElementById('i1').style.display='block' "

只做一行，完成工作。 您可以将图像路径放在src中，默认显示设置为none，并在单击图像时显示。

将图像源传递给 <img> 按钮点击事件

问题描述

4 个解决方案

解决方案1
3 已采纳 2013-10-15 03:40:30

解决方案2
1 2013-10-15 03:39:30

解决方案3
0 2013-10-15 03:43:14

解决方案4
0 2013-10-15 04:48:37

将图像源传递给 <img> 按钮点击事件

问题描述

4 个解决方案

解决方案1 3 已采纳 2013-10-15 03:40:30

解决方案2 1 2013-10-15 03:39:30

解决方案3 0 2013-10-15 03:43:14

解决方案4 0 2013-10-15 04:48:37

解决方案1
3 已采纳 2013-10-15 03:40:30

解决方案2
1 2013-10-15 03:39:30

解决方案3
0 2013-10-15 03:43:14

解决方案4
0 2013-10-15 04:48:37