Replace image with different image/button - javascript

Question

within a function, I'm trying to replace a image/button with another image/button.

       <img src="images/14.gif" id="ImageButton1" onClick="showLoad()">    
        <img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="display:none;" onClick="showLock()" />

            <script type="text/javascript" language="javascript"> 

            function swapButton(){
                    document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src;
                }
</script>

But I have the problem that there is two of the same button, (button 2) when it is replaced! (one at the top of the page, and one where it is meant to be). I was wondering if there is a way of getting rid of the extra button at the top, or creating the button element within the javascript function?

Thanks for any help.

Bibin Velayudhan · Accepted Answer · 2012-05-05 15:49:16Z

1

You can remove an element in javascript using

var el = document.getElementById('id');
var remElement = (el.parentNode).removeChild(el);

answered May 5, 2012 at 15:49

Bibin Velayudhan

3,1031 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

carlosfigueira · Accepted Answer · 2012-05-05 16:09:04Z

1

You can hide the first button, not only change the image source. The code below shows one way of doing that.

<img src="images/14.gif" id="ImageButton1" onClick="swapButtons(false)" style="visibility: visible;" />     
<img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" /> 

<script type="text/javascript" language="javascript">  
    function swapButtons(show1) { 
        document.getElementById('ImageButton1').style.visibility = show1 ? 'visible' : 'hidden';
        document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
    } 
</script>

answered May 5, 2012 at 16:09

carlosfigueira

87.7k14 gold badges137 silver badges176 bronze badges

Comments

David Thomas · Accepted Answer · 2012-05-05 16:14:42Z

I'd suggest something akin to the following:

function swapImageSrc(elem, nextElemId) {
    if (!elem) {
        return false;
    }
    if (!nextElemId || !document.getElementById(nextElemId)) {
        var id = elem.id.replace(/\d+/, ''),
            nextNum = parseInt(elem.id.match(/\d+/), 10) + 1,
            next = document.getElementById(id + nextNum).src;
    }
    else {
        var next = document.getElementById(nextElemId).src;
    }

    elem.src = next;
}

var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    images[i].onclick = function() {
        swapImageSrc(this,imgButton2);
    };
}

JS Fiddle demo.

Edited to add that, while it is possible to switch the src attribute of an image it seems needless, since both images are present in the DOM. The alternative approach is to simply hide the clicked image and show the next:

function swapImageSrc(elem, nextElemId) {
    if (!elem) {
        return false;
    }
    if (!nextElemId || !document.getElementById(nextElemId)) {
        var id = elem.id.replace(/\d+/, ''),
            nextNum = parseInt(elem.id.match(/\d+/), 10) + 1,
            next = document.getElementById(id + nextNum);
    }
    else {
        var next = document.getElementById(nextElemId);
    }
    if (!next){
        return false;
    }
    elem.style.display = 'none';
    next.style.display = 'inline-block';
}

var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    images[i].onclick = function() {
        swapImageSrc(this,imgButton2);
    };
}

JS Fiddle demo.

Edited to offer an alternate approach, which moves the next element to the same location as the clicked image element:

function swapImageSrc(elem, nextElemId) {
    if (!elem) {
        return false;
    }
    if (!nextElemId || !document.getElementById(nextElemId)) {
        var id = elem.id.replace(/\d+/, ''),
            nextNum = parseInt(elem.id.match(/\d+/), 10) + 1,
            next = document.getElementById(id + nextNum);
    }
    else {
        var next = document.getElementById(nextElemId);
    }
    if (!next){
        return false;
    }
    elem.parentNode.insertBefore(next,elem.nextSibling);
    elem.style.display = 'none';
    next.style.display = 'inline-block';
}

var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    images[i].onclick = function() {
        swapImageSrc(this,imgButton2);
    };
}

JS Fiddle demo.

Collectives™ on Stack Overflow

Replace image with different image/button - javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related