Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Switching buttons between enabled and disabled

    Hello potential hero.

    I have a page which contains three Div tags (A, B, C). A is the main div which contains a button that is enabled. B and C each contain a button which is disabled. The B and C Div tags have an 'OnClick' event which runs a piece of javascript to switch the Div which has been clicked with A.

    The switching works fine, however I cant figure out how to disable the button in A and enable which ever has been clicked. I think I may have dug a hole with the way I have coded the switch, creating a problem where I cant create an If statement to account for the posibility of the C div being stored in A, or A in C or whatever. I am pretty new to Javascript so maybe Im being silly. I Have attached the HTML and javascipt below;

    Code:
    <html>
      <head>
    <script type="text/javascript" src="javascript.js"></script>
      </head>
      <body>
       <div id="a">
       <button type="button" id="abutton" onclick="location.href='http://www.google.com';">Abutton</button>
       </div>
       <div id="b" onclick="switchb()">  
       <button type="button" id="bbutton" disabled="true" onclick="location.href='http://www.google.com';">Bbutton</button> 
       </div>
       <div id="c" onclick="switchc()">
       <button type="button" id="cbutton" disabled="true" onclick="location.href='http://www.google.com';">Cbutton</button>
       </div>
      </body>
    </html>
    Code:
    function switchb()
    {
    var tmp = document.getElementById('a').innerHTML;
    document.getElementById('a').innerHTML = document.getElementById('b').innerHTML;
    if (document.getElementById('abutton').disabled=false && document.getElementById('bbutton').disabled=true && document.getElementById('cbutton').disabled=true)
    {
    document.getElementById('abutton').disabled=true;
    document.getElementById('bbutton').disabled=false;
    }
    document.getElementById('b').innerHTML = tmp;
    }
    
    
    function switchc()
    {
    var tmp = document.getElementById('a').innerHTML;
    document.getElementById('a').innerHTML = document.getElementById('c').innerHTML;
    if (document.getElementById('abutton').disabled=false && document.getElementById('bbutton').disabled=true && document.getElementById('cbutton').disabled=true)
    {
    document.getElementById('abutton').disabled=true;
    document.getElementById('cbutton').disabled=false;
    }
    document.getElementById('c').innerHTML = tmp;
    }
    The javascript I have posted is just a small example of what Ive been trying. It seems what ever I try messes up after clicking the buttons around a few times.

    If anyone could suggest the correct logic to keep the buttons enabled or disabled correctly, or suggest a better method I would be so so so so so so grateful - this is doing my head in.

  • #2
    New Coder
    Join Date
    Jan 2011
    Posts
    52
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Code:
    <html>
      <head>
      <style type='text/css'>
      div{ border:1px solid black}
      </style>
      </head>
      <body>
       <div id="a">
       <button type="button" id="abutton" onclick="location.href='http://www.google.com';">Abutton</button>
       </div>
       <div id="b" onclick="switchb()">  
       <button type="button" id="bbutton" disabled="true" onclick="location.href='http://www.google.com';">Bbutton</button> 
       </div>
       <div id="c" onclick="switchc()">
       <button type="button" id="cbutton" disabled="true" onclick="location.href='http://www.google.com';">Cbutton</button>
       </div>
       
       <script type="text/javascript" >
    
       function dSwap(  )
       {
         var elems = [], tempElem = document.createElement( 'div' );
         
         for( var i = 0; arguments[ i ]; i++ )
           elems.push( document.getElementById( arguments[ i ] ) );
         
         return function()
         {  
           var alemA, elemB, swap; 
             
           for( var i = 0; elems[ i ] !== this; i++ )
           ;
             
           if( i != 0 )
           {         
             elemA = elems[ 0 ];
             elemB = elems[ i ];  
             elemA.parentNode.replaceChild( tempElem, elemA );
             elemB.parentNode.replaceChild( elemA, elemB );
             tempElem.parentNode.replaceChild( elemB, tempElem );
             swap = elems [ 0 ];
             elems[ 0 ] = elems[ i ];
             elems[ i ] = swap;
             
             document.getElementById( elemA.id + 'button' ).disabled = true;        
             document.getElementById( elemB.id + 'button' ).disabled = false;   
           }          
         }
       }
    
       document.getElementById( 'a' ).onclick =
       document.getElementById( 'b' ).onclick =
       document.getElementById( 'c' ).onclick = dSwap( 'a', 'b', 'c' );
    
       </script> 
       
      </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is absolutely amazing - works exactly as I need it to.

    You are a very intelligent person, I bet your charming and good looking too. In fact your probably the best person I've come in contact with in recent months.

    One slight down side to this is I have no idea how the above works. If Calvert or anyone else could break it down and explain just a little bit (So I dont have to post on here next time I need to do something similar)...

    ... I would be so grateful I would probably **** my pants.


  •  

    Posting Permissions

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