Pass image source to on button click event

Question

I am getting user ID on fly and will use it to show the user image. For that I want to set the img path when user click on button. HEre is code:

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

Fiddle:

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

What's wrong?

`document.getElementbyID(i1).src = path;` i1 isn't defined. Did you mean `"i1"`? — Cjmarkham, Oct 15 '13 at 03:25
In addition to Carl's point, do you mean to use `getElementById`? Note: The last letter is a lower case 'd'. — Steve, Oct 15 '13 at 03:29
@Steve: is JS case sensitive? Thanks for pointing! @ Card: yes I meant what you say! — , Oct 15 '13 at 04:49

score 3 · Accepted Answer · edited May 23 '17 at 12:14

Here is a syntactically correct version of your handler:

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

However, the real trick here is with JSFiddle. You have to look in Frameworks and Extensions and switch from onLoad to No wrap - in <body>, as explained in this answer.

Here is a working JSFiddle: http://jsfiddle.net/PpbnG/2/

score 1 · Answer 2 · answered Oct 15 '13 at 03:39

1

This should fix it:

replace document.getElementbyID(i1) with document.getElementById("i1")
replace document.getElementbyID(i1).display with document.getElementById("i1").style.display

Full working function:

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

answered Oct 15 '13 at 03:39

pax162

4,735
2
22
28

essentially... i was just about to post this but i'll +1 instead – Jay Harris Oct 15 '13 at 03:40

score 0 · Answer 3 · answered Oct 15 '13 at 03:43

0

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

answered Oct 15 '13 at 03:43

Vicky Gonsalves

11,593
2
37
58

score 0 · Answer 4 · answered Oct 15 '13 at 04:48

0

Would it be easier if you just add onclick event to the button

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

just one line and job done. You can put the image path in the src with default display set to none, and when you click the image displays.

answered Oct 15 '13 at 04:48

Godinall

2,280
1
13
18

Image path coming in some function, so following my procedure is essential. Thanks for this answer. – Oct 15 '13 at 04:51

Pass image source to on button click event

4 Answers4