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>

---

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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')" >