Switching buttons between enabled and disabled

jamiekhan

05-26-2012, 02:49 PM

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;

<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>

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.

Calvert Tripesi

05-26-2012, 05:31 PM

<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>

jamiekhan

05-26-2012, 06:36 PM

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.