How to switch between two functions and disable the other

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

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

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

Another way.

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

Wow! Works great and fewer code.

Thanks guy, and I prefer of centered effect better.

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>
		$(document).ready(function() {

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


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

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

		function One() {
			var img = getElementById('image');
			img.src = 'a.png';
			// alert('You have clicked me');

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.

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.

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

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