Javascript Swap Images on Button Click

Question

I currently have 4 buttons that should swap from one image to another once clicked. I can get the first two to work, but once I click the third and fourth, once I click another button the images don't disappear - they stay on the screen.

I have the current code in the document head:

function showImg(strShow, strHide) {
  document.getElementById(strShow).style.display = 'block'; 
  document.getElementById(strHide).style.display = 'none'; 
}

<div id="image1">
  <INPUT type="submit" class="myButton1" value="" button 
         onclick="showImg( 'a', 'b', 'c', 'd' )"></button>  
  <img id="a" src="Website Photos/scannedimages/remembranceivy.jpg" width="220" height="116.895" style="display:none" alt="A" /> 
</div>

<div id="image2">
  <INPUT type="submit" class="myButton2" value="" button 
         onclick="showImg( 'b', 'a', 'c', 'd' )"></button>  
  <img id="b" src="Website Photos/scannedimages/remembrancemaple.jpg" width="220" height="116.895" style="display:none" alt="B" /> 
</div>

<div id="image3">
  <INPUT type="submit" class="myButton3" value="" button 
         onclick="showImg( 'c', 'a', 'b', 'd' )"></button>  
  <img id="c" src="Website Photos/scannedimages/remembranceoak.jpg" width="220" height="116.895" style="display:none" alt="C" /> 
</div>

<div id="image4">
  <INPUT type="submit" class="myButton4" value="" button 
         onclick="showImg( 'd', 'a', 'c', 'd')"></button>  
  <img id="d" src="Website Photos/scannedimages/remembrancepine.jpg" width="220" height="116.895" style="display:none" alt="D" /> 
</div>

I'm totally lost. Does something need added to the Javascript to get the third and fourth images to disappear? Any help would be appreciated!

Why do you have `input` and `button` tags running together? Why are you passing four arguments to a function expecting only two? Also, your last instance lists element d twice. — isherwood, Jan 12 '14 at 19:51

score 0 · Answer 1 · answered Jan 12 '14 at 19:54

your function accepts two parameters ( strShow, strHide ) but you are passing it 4 ( 'c', 'a', 'b', 'd' ). so its ignoring the last 2 and thats why your photos arent disappearing. e.g when you click on image 3, image C (the first param) is shown and image B (second param) is hidden. but if the photo being displayed is D or A, it wont hide it.

score 0 · Answer 2 · answered Jan 12 '14 at 19:54

Try

<div id="image3">
<INPUT type="submit" class="myButton3" value="" button onclick="showImg('c', 'd')"></input>  
<img id="c" src="Website Photos/scannedimages/remembranceoak.jpg" width="220" height="116.895" style="display:none" alt="C" /> 
</div>

<div id="image4">
<INPUT type="submit" class="myButton4" value="" button onclick="showImg('d', 'a')"></input>  
<img id="d" src="Website Photos/scannedimages/remembrancepine.jpg" width="220" height="116.895" style="display:none" alt="D" /> 
</div>

Note showIgm only takes two parameters.

Javascript Swap Images on Button Click

2 Answers2