How to switch between two functions and disable the other

JavaScript
1

Hi guys,

I have the html code here:


<img id=img src=''>
<input type=submit value='Photo A' id=buttonA />
<input type=submit value='Photo B' id=buttonB />

and the javascript code here:


img = document.getElementByID('img');
buttonA = document.getElementByID('buttonA');
buttonB = document.getElementByID('buttonB');

function A() {
   img.src = Photo A.jpg;
}

function B() {
   img.src = Photo B.jpg;
}

buttonA.addEventListener('click', false, A);
buttonB.addEventListener('click', false, B);

I have problems as in this scenario:

  1. When I hit Button A first, Photo A shows; but then I hit Button B, Photo B does not show.
  2. When I hit Button B first, Photo B shows; and then I hit Button A, Photo A shows, but then I hit Button B again the photo remain A and does not change.

How do I switch functions alternately by disabled one other when the other is clicked.

Hope I make myself clear and thanks in advance

2

You don’t need 2 functions. You can do it with just one.

    <body>
        <div>
            <img id="img1" src="A.jpg" alt="" />
            <button id="btn1">Show A</button>
            <button id="btn2">Show B</button>
        </div>
        
        <script type="text/javascript">
            document.getElementById('btn1').onclick=function(){showPic('A.jpg');}
            document.getElementById('btn2').onclick=function(){showPic('B.jpg');}
            function showPic(fileName){
                document.getElementById('img1').src = fileName;
            }
        </script>
    </body>
3

Another way.

<img id="imgWrapper" src="">
<button data-image="bg1.png">Photo A</button>
<button data-image="bg2.png">Photo B</button>
<script>
	var imgWrap = document.getElementById('imgWrapper'),
		imgBtns = document.querySelectorAll('[data-image]'),
		i;
	for( i = 0; i < imgBtns.length; i++ ) {
		imgBtns[i].onclick = function() {
			imgWrap.src = this.getAttribute('data-image');
		};
	};
</script>
4

Wow! Works great and fewer code.

Thanks guy, and I prefer of centered effect better.

5

I’ve found a solution that better suit my need. But why the javascript bellow isn’t work?


        <img id="image" src="">
	
	<button id="A">Function A</button>
	<button id="B">Function B</button>
	<script>
		$(document).ready(function() {

		  $('#A').click(function() {     

			One();
			
		  });

		  $('#B').click(function() {      

			$('#image').attr('src', 'b.png');

		  });
		  
		  event.preventDefault();
		  
		});
			
		function One() {
			var img = getElementById('image');
			img.src = 'a.png';
			// alert('You have clicked me');
		}
	</script>

The reason I want to do this is to add different effects to each photo. When I uncomment the alert go live.

Also, how do I convert to javascript. I hate this jQuery thing.

6

Why on earth are you now switching to jquery?, especially for something so basic.

It’s running a lot more code in the bg than either of the 2 previous solutions and in your last post you seem to place a high importance on less code.

7

Because there something more than just about showing picture. I want to make real time image feed like on this website: http://sydney-now.jit.su/ but within a div tags

8

Ha! that was simple. It should be var img = document.getElementById(‘image’);