/    Sign up×
Community /Pin to ProfileBookmark

Simple change SRC code not working. Help?

Copy linkTweet thisAlerts:
Nov 22.2008

I want an IMG SRC to change when someone clicks on a thumbnail.

Here’s what I have:

[CODE]<script language=”javascript”>

function openPhoto(num) {

document.getElementById(‘photoviewer’).style.display = “block”;

document.getElementById(‘photo’).src = num + “.png”;
}

</script>[/CODE]

and…

[CODE]
<div id=”photos”>

<div id=”p1″ onclick=”openPhoto(p1);”></div>
<div id=”p2″ onclick=”openPhoto(p2);”></div>
<div id=”p3″ onclick=”openPhoto(p3);”></div>
<div id=”p4″ onclick=”openPhoto(p4);”></div>
<div id=”p5″ onclick=”openPhoto(p5);”></div>

</div>[/CODE]

The image source ends up reading, “…/[object%20HTMLDivElement].png”.

Can anyone tell me what’s wrong with my code?

Thanks in advance!

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallNov 22.2008 — What values do you have in the p1 through p5 variables or have you just left off the quotes around them that would have made them strings rather than variables?
Copy linkTweet thisAlerts:
@juststrandedauthorNov 22.2008 — No values assigned. I suppose I left off the quotes ignorantly. I tried to use single quotes around them but that doesn't work. Or do I need to use single quotes around "num" in the function name too?

EDIT: I guess I just don't know where to use quotes (and which one, single or double) in this situation. I can't write: ...src = "num" + ".png"; because I don't want it to print "num", I want its value, but its value isn't a variable but a string so it needs quotes, but WHERE!? Hah.
Copy linkTweet thisAlerts:
@starknightdNov 23.2008 — try this:

<script language="javascript">

function openPhoto(num) {

document.getElementById('photoviewer').style.display = "block";

document.getElementById('photo').src = num.id + ".png";

}

</script>


<div id="p1" onclick="openPhoto(this);"></div>

...

<div id="p5" onclick="openPhoto(this);"></div>

  • - Stefan
    • Copy linkTweet thisAlerts:
    @juststrandedauthorNov 23.2008 — Beautiful. Makes perfect sense when I read it. I just wish I could have thought of it! Some day... some day I'll get there.

    Thanks so much!
    Copy linkTweet thisAlerts:
    @starknightdNov 23.2008 — glad I could help ?
    Copy linkTweet thisAlerts:
    @juststrandedauthorNov 23.2008 — Any idea why this next() function doesn't work?

    <i>
    </i>&lt;script language="javascript"&gt;

    var photo = "document.getElementById('photo').src";

    var cur = 2;

    function openPhoto(num) {

    document.getElementById('photoviewer').style.display = "block";

    document.getElementById('photo').src = num.id + ".png";

    if (photo == "p1.png") { cur=1; }

    else if (photo == "p2.png") { cur=2; }

    else if (photo == "p3.png") { cur=3; }

    else if (photo == "p4.png") { cur=4; }

    else { cur=5; }

    }

    function closePhoto() {

    document.getElementById('photoviewer').style.display = "none";

    }

    function next() {

    cur = cur++;

    if (cur==1) {photo = "p1.png";}

    else if (cur==2) {photo = "p2.png";}

    else if (cur==3) {photo = "p3.png";}

    else if (cur==4) {photo = "p4.png";}

    else {photo = "p5.png";}

    }

    &lt;/script&gt;


    [code=html]
    <div id="next" onclick="next();"></div>

    <img src="p1.png" id="photo" />

    <div id="photos">

    <div id="p1" onclick="openPhoto(this);"></div>
    <div id="p2" onclick="openPhoto(this);"></div>
    <div id="p3" onclick="openPhoto(this);"></div>
    <div id="p4" onclick="openPhoto(this);"></div>
    <div id="p5" onclick="openPhoto(this);"></div>

    </div>
    [/code]
    Copy linkTweet thisAlerts:
    @starknightdNov 23.2008 — actually, since your doing a photoshow it might be good to add a "title" (I think this is legal) which describes the image, and "hide" the string "p1" in the first 2 characters. extracting them in the function:


    <div title="p1: Unique Description Here" onclick="openPhoto(this);"></div>

    and then in the function:

    document.getElementById('photo').src = num.title[0] + num.title[1] + ".png";

    as long as you only have 9 images (10 if you start at p0) this should simplify it somewhat. though technically, it's only simpler if you have a title for each one, of course..

    I don't think a user will specifically mind seeing the "pN" in the title text. but either way, this is something I'm doing now, so I thought I'd mention it.
    Copy linkTweet thisAlerts:
    @juststrandedauthorNov 23.2008 — To be honest I'll probably end up customizing a highslide script for the gallery, but I like to try to get an idea of these things before I just use (partially) prewritten script.
    Copy linkTweet thisAlerts:
    @starknightdNov 23.2008 — var photo = document.getElementById('photo').src;

    I think it's because this thing is a variable, not a pointer to the element that you want. so when you set photo equal to anything, all your doing is changing the text string..

    try photo = document.getElementById('photo');

    and then use photo.src wherever you had photo...

    but how about cleaning up the code:

    if (photo == "p1.png") { cur=1; }

    else if (photo == "p2.png") { cur=2; }

    else if (photo == "p3.png") { cur=3; }

    else if (photo == "p4.png") { cur=4; }

    else { cur=5; }

    cur = photo.src[1]; // as long as have less than 10 images :)

    you may need this instead, due to browser issues, I can't be certain:

    cur = parseInt(photo.src[1]);

    cur = cur++;

    if (cur==1) {photo = "p1.png";}

    else if (cur==2) {photo = "p2.png";}

    else if (cur==3) {photo = "p3.png";}

    else if (cur==4) {photo = "p4.png";}

    else {photo = "p5.png";}

    first, limit the conditionals:

    if(cur == 5) { return; }; // this will keep the page from being updated unnecessarily.
    cur += 1;
    photo.src = "p" + cur + ".png";
    Copy linkTweet thisAlerts:
    @juststrandedauthorNov 23.2008 — Thanks for all of your help.

    For anyone having the same problem, here is the solution I will use:

    After a long while of nothing working the way I wanted it to, I came up with this on my own and it works perfectly:

    [CODE]

    <script language="javascript">

    var cur = 0;

    function openPhoto(num,sCur) {

    document.getElementById('photoviewer').style.display = "block";

    document.getElementById('photo').src = num.id + ".png";

    cur=sCur;

    }

    function closePhoto() {

    document.getElementById('photoviewer').style.display = "none";

    }

    function next() {

    cur+=1;

    document.getElementById('photo').src = "p" + cur + ".png";

    if (cur>5) {document.getElementById('photo').src = "p1.png"; cur=1;}

    }

    </script>

    [/CODE]



    [code=html]
    <div id="photoviewer">

    <div id="close" onclick="closePhoto();"></div>
    <div id="previous" onclick="previous();"></div>
    <div id="next" onclick="next();"></div>

    <img src="p1.png" id="photo" />

    </div>

    <div id="photos">

    <div id="p1" onclick="openPhoto(this,1);"></div>
    <div id="p2" onclick="openPhoto(this,2);"></div>
    <div id="p3" onclick="openPhoto(this,3);"></div>
    <div id="p4" onclick="openPhoto(this,4);"></div>
    <div id="p5" onclick="openPhoto(this,5);"></div>

    </div>
    [/code]

    As a side note, this isn't limited to 10 photos. Oh, and I didn't put in the previous() function yet but that will just be a reverse of the next() function.
    Copy linkTweet thisAlerts:
    @starknightdNov 23.2008 — I didn't think you wanted it to be cyclical..

    cur = (cur % 5) + 1;
    document.getElementById('photo').src = "p" + cur + ".png";
    ×

    Success!

    Help @juststranded spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...