SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    328
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How to switch between two functions and disable the other

    Hi guys,

    I have the html code here:
    Code:
    <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:
    Code:
    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. #2
    Non-Member
    Join Date
    Jul 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need 2 functions. You can do it with just one.

    Code:
        <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. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Another way.
    HTML Code:
    <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. #4
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    328
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Wow! Works great and fewer code.

    Thanks guy, and I prefer of centered effect better.

  5. #5
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    328
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I've found a solution that better suit my need. But why the javascript bellow isn't work?
    Code:
            <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. #6
    Non-Member
    Join Date
    Jul 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    328
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    328
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ha! that was simple. It should be var img = document.getElementById('image');


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •