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。您必须查看“框架和扩展程序”，然后从onLoad切换到No wrap - in <body>，如answer中所述。

这是一个有效的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 个答案: