javascript - 将图像源传递给按钮单击事件

Question

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

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/

怎么了？

score 3 · Accepted Answer

这是您的处理程序的语法正确版本：

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 and Extensions 并从切换onLoad到No wrap - in <body>，如本答案中所述。

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

score 1 · Accepted Answer

这应该解决它：

用 document.getElementById("i1") 替换 document.getElementbyID(i1)
用 document.getElementById("i1").style.display 替换 document.getElementbyID(i1).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";
}

score 0 · Accepted Answer

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";
        }

score 0 · Accepted Answer

如果您只是将onclick事件添加到按钮会更容易吗

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

只需一条线即可完成工作。您可以将图像路径放在 src 中，默认显示设置为无，然后单击图像时显示。

javascript - 将图像源传递给按钮单击事件

4 回答 4

Related

Reference