Javascript function changeImage: Issues using variables for getElementById or getElementsByName

Question

I'm having some trouble getting my code to do what I want. I have multiple sections that I have set to toggle show/hide, and it functions correctly. However, I'm now trying to switch the images to where instead of always being static with "More," I'd like it to switch to "Less" when it's expanded.

It does work... but only for the first one. If I press the buttons on any of the others, it only changes just the first one. You can see the page here:

http://jfaq.us

I've tried several different solutions with variables, but I can't seem to get it to work.

Help? Thanks in advance!

function changeImage() {
    if (document.getElementById("moreorless").src == "http://jfaq.us/more.png") 
    {
        document.getElementById("moreorless").src = "http://jfaq.us/less.png";
    }
    else 
    {
        document.getElementById("moreorless").src = "http://jfaq.us/more.png";
    }
}

function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none")
    {
        e.style.display="block"
    }
    else{
        e.style.display="none"
    }
    return true;
}

<div>

    <a href="http://jfaq.us/guestbook">Guestbook</a>

    <div>

        <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" >

    </div>

<div id="para3" style="display:none">

This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.

</div>

    <a href="http://jfaq.us/about">About</a>

    <div>

        <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" >

    </div>

<div id="para2" style="display:none">

This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.

</div>

</div>

All your buttons have the same ID. IDs should be unique in a document. If you want to target multiple elements with a selector, use classes, or pass the event into the event handler function and use that. — godfrzero, Aug 02 '13 at 18:20
Yes, I know this. I'm putting up this base code to work from as I've had no luck using getElementsByName or getElementsbyClassName in my attempts. Can you provide a small example, please? I'm still somewhat new to javascript. — Johnathan 'Zy' Sawyer, Aug 02 '13 at 18:26
It looks like you have jQuery included, even if it's an old version. If you update the version and start binding events from a script, your code will probably look a lot cleaner. — godfrzero, Aug 02 '13 at 18:28

amakhrov · Answer 1 · 2013-08-02T18:45:10.123

0

That's because you use the same id for the both images, and getElementById apparently takes the first one.

Here is the updated code: html:

 <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >

script:

// inside the event handler 'this' refers to the element clicked
function changeImage() {
    if (this.src == "http://jfaq.us/more.png") {
        this.src = "http://jfaq.us/less.png";
    } else {
        this.src = "http://jfaq.us/more.png";
    }
}

edited Aug 02 '13 at 18:45

answered Aug 02 '13 at 18:24

amakhrov

3,820
1
13
12

That is not correct. The context object will be window in that case and you will be setting the `src` property on the window object. – plalx Aug 02 '13 at 18:34
That's right. Also change the 'onlick' definition this way: – amakhrov Aug 02 '13 at 18:44

score 0 · Answer 2 · answered Aug 02 '13 at 18:28

0

You are using same Id for all inputs. This is causing the problem. Give every element a unique Id.

If you want to perform grp operation use jquery class.

answered Aug 02 '13 at 18:28

Rupesh

444
3
11

score 0 · Accepted Answer · answered Aug 02 '13 at 18:30

The id attribute must be unique. That's why it's not working. Also, it's not a good idea to use inline event handlers like you are doing, you should register event handlers using addEventListener instead.

Without changing all your code, one thing you can do is pass a reference to the currently clicked element to the changeImage function.

function changeImage(el) {
    var moreUrl = 'http://jfaq.us/more.png';
    el.src = el.src === moreUrl? 'http://jfaq.us/less.png' : moreUrl;
}

Then change the inline handler for onclick="changeImage(this);"

Is there a quick way to add a 700 ms fade in / fade out in my code, or am I better off using CSS for the fade? — Johnathan 'Zy' Sawyer, Aug 02 '13 at 18:52

score 0 · Answer 4 · answered Aug 02 '13 at 18:58

check this

http://jsfiddle.net/Asb5A/3/

function changeImage(ele) {
if (ele.src == "http://jfaq.us/more.png") 
{
    ele.src = "http://jfaq.us/less.png";
}
else 
{
    ele.src = "http://jfaq.us/more.png";
}
}

<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >

Javascript function changeImage: Issues using variables for getElementById or getElementsByName

4 Answers4