i wanted to make the button such that if button A is click, A will disable. And when B is click B will disabled and will reactive button A.
How can i change my code? to achieve this? This i would like to make this function can work with more buttons later on. If A is click, then A disabled and B,C,D will be activated.
<!DOCTYPE HTML>
<html>
<head>
<title>Animation Test</title>
</head>
<body>
<div>
<canvas id="myCanvas" width="250" height="250" style="border:solid 1px #000000;">
<p>Your browser doesn't support canvas.</p>
</canvas>
<button id="start" type="button" start.disable = "true" onClick="loadingComplete(); SetButtonStatus()" />Start</button>
<button id="pause" type="button" pause.disable="false" onClick=";SetButtonStatus();" />Pause</button>
<button id="reset" type="button" pause.disable="false" onClick=";SetButtonStatus();" />Reset</button>
</div>
<script>
var surface = document.getElementById("myCanvas");
var surfaceContext = surface.getContext('2d');
var happy;
var x = 50;
var y = 0;
var x1 = 150;
var y1 = 120;
var dirX = 3;
var dirY = 1;
var dirX1 = 2;
var dirY1 = 2;
var bgImage = new Image();
bgImage.src = "Pictures/PondEnvironment/pond.png";
bgImage.onload = function () {
surfaceContext.drawImage(bgImage, 0, 0, 250, 250);
};
function SetButtonStatus()
{
if (document.getElementById('start').disabled == false)
{
document.getElementById('start').disabled=true;
document.getElementById('pause').disabled=false;
document.getElementById('reset').disabled=false;
return 0;}
if (document.getElementById('pause').disabled == false )
{
document.getElementById('pause').disabled =true;
document.getElementById('start').disabled =false;
return 0;
}
if (document.getElementById('reset').disabled == false )
{
document.getElementById('pause').disabled =false;
document.getElementById('reset').disabled =false;
document.getElementById('start').disabled =true;
return 0;
}
}
/*function disable(buttonid){
var button1_name;
var button2_name;
if(button1_name==1){
document.getElementById('button1').disabled = true;
document.getElementById('button2').disabled = false;
document.getElementById('button1').name=0;
}
if(button2_name==3){
document.getElementById('button2').disabled = true;
document.getElementById('button1').disabled = false;
document.getElementById('button2').name=0;
}
}
*/
function drawCanvas() {
// Get our Canvas element
//surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported, load the image
happy = new Image();
//happy.onload = loadingComplete;
happy.src ="image/pic1.jpg";
happy2 = new Image();
happy2.src ="image/anchovies.png";
var bgImage = new Image();
bgImage.src = "Pictures/PondEnvironment/pond.png";
}
}
function loadingComplete(e) {
// When the image has loaded begin the loop
setInterval(loop, 25);
start.disable=true;
}
function loop() {
// Each loop we move the image by altering its x/y position
// Grab the context
//var surfaceContext = surface.getContext('2d');
// Clear the canvas to White
//surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.drawImage(bgImage,0,0,250,250);
//surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Draw the image
surfaceContext.drawImage(happy, x, y, 50, 30);
surfaceContext.drawImage(happy2, x1, y1, 50, 30);
x += dirX;
y += dirY;
x1 += dirX1;
y1 += dirY1;
if (x <= 0 || x > 220 - 23) {
dirX = -dirX;
}
if (y <= 0 || y > 250 - 30) {
dirY = -dirY;
}
if (x1 <= 0 || x1 > 220 - 23) {
dirX1 = -dirX1;
}
if (y1 <= 55 || y1 > 250 - 30) {
dirY1 = -dirY1;
}
}
</script>
<script>drawCanvas(); </script>
</body>
</html>
EDITED
I have changed the “disable” to “disabled” and I am trying to make the pause button to disable and enable back ?
function startStatus()
{
if (start.disabled)
start.disabled = "enabled";
/* else if (pause.disabled = "true")
{
start.disabled ="disabled";
}*/
else if (start.disabled ="true")
{
//pause.disabled = "enabled"
}
if (pause.disabled)
pause.disabled = "false";
/* else if (pause.disabled = "true")
{
start.disabled ="disabled";
}*/
else if (start.disabled ="false")
{
//pause.disabled = "enabled"
}
}
Code updated::
I would like to make the following, but my code does not perform that.
-
click “Start_btn”
- start btn — disable
- pause btn — enable
- reset btn — enable
-
click “pause_btn”
- start btn — enable
- pause btn — disable
- reset btn — enable
-
click “reset_btn”
- start btn — enable
- pause btn — disable
- reset btn — disable
My code can be found here >>>> >http://jsfiddle.net/fN8XD/5/
working your code
js fiddle demo
js fiddle demo