CODEWITHSUNDEEP
javascripthtml
Harry
Harry

Reputation: 319

Replace image with different image/button - javascript

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.

Upvotes: 2

Views: 4426

Answers (3)

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 1

carlosfigueira
carlosfigueira

Reputation: 87228

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>

Upvotes: 1

Bibin Velayudhan
Bibin Velayudhan

Reputation: 3103

You can remove an element in javascript using 

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

Upvotes: 1

Related Questions