Замените изображение другим изображением/кнопкой - javascript

Question

внутри функции, я пытаюсь заменить изображение/кнопку другим изображением/кнопкой.

 <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> 

Но у меня есть проблема, что есть две одинаковые кнопки, (кнопка 2), когда она заменяется! (один в верхней части страницы и тот, где он должен быть). Мне было интересно, есть ли способ избавиться от дополнительной кнопки вверху или создать элемент кнопки в функции javascript?

Спасибо за любую помощь.

Answer 1

Вы можете удалить элемент в JavaScript с использованием

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

Answer 2

Я хотел бы предложить что-то похожее на следующее:

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.

---

Под редакцией добавить, что, в то время как можно переключить атрибут src изображения, кажется, само собой, так как оба изображения присутствуют в DOM. Альтернативный подход, чтобы просто скрыть щелкнул изображение и показать следующее:

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.

---

Отредактировано предложить альтернативный подход, который перемещает 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.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.

Answer 3

Вы можете скрыть первую кнопку, а не только изменить источник изображения. В приведенном ниже коде показан один из способов сделать это.

<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>