我想制作按钮，如果单击按钮A，A将禁用。当B点击时，B将被禁用并且将被动反应按钮A.
如何更改我的代码？为达到这个？我想让这个功能可以在以后使用更多按钮。如果单击A，则A将被禁用，B，C，D将被激活。
<!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 我已将“禁用”更改为“已禁用”，并且我尝试将暂停按钮设置为禁用并启用？
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"
}
}
代码更新::
我想做以下内容，但我的代码没有执行此操作。
点击“Start_btn”
点击“pause_btn”
点击“reset_btn”
我的代码可以在这里找到＆gt;＆gt;＆gt;＆gt; ＆gt; http：//jsfiddle.net/fN8XD/5/
答案 0 :(得分：0)
在你的代码中（我的包装）：
> <button id="start" type="button" start.disable = "false"
> onClick="loadingComplete(); SetButtonStatus()" />Start</button>
您的代码依赖于id＆＃34; start＆＃34;作为一个引用id＆＃34; start＆＃34;的元素的全局变量，这是由IE引入的非标准功能（并由其他浏览器复制以实现兼容性）被广泛认为是一个非常糟糕的主意，请勿使用它
＆＃34; start.disable＆＃34;的按钮元素没有标准属性，因此很多浏览器不会通过相同的命名元素属性提供访问权限。具有句点的属性名称无法使用javascript点表示法访问，必须使用括号表示法访问它。某些浏览器会将其设为element['start.disable']，但所有浏览器都会将其设为getAttribute('start.disable')。
但是，我认为你是在残疾人属性之后。
最后，开始标记的结束部分放错了地方＆＃34; /＆＃34;在XML中用于表示空元素。这显然不是XML，如果是，它会导致元素标记的其余部分出现语法错误。我认为你想要的是：
<button id="start" type="button" disabled
onClick="loadingComplete(); SetButtonStatus()">Start</button>
另请注意，disabled属性会导致已禁用属性设置为true的已实现DOM元素（即布尔值为true，而不是字符串＆＃34; true＆＃34;）。因此，您的代码可以是：
var start = document.getElementById('start');
if (start.disabled) {
// toggle status
start.disabled = false;
} ...
等等。
请注意，您可以写：
if (start.disabled == true)
但上面的内容不如打字和等效。
答案 1 :(得分：-2)
使用您的代码
<html>
<head>
<title>Animation Test</title>
<script>
function SetButtonStatus()
{
if (document.getElementById('start').disabled == false)
{document.getElementById('start').disabled=true;
document.getElementById('pause').disabled=false;
return 0;}
if (document.getElementById('pause').disabled == false )
{//i added this line**
//pause.disabled ="enabled"
document.getElementById('pause').disabled =true
document.getElementById('start').disabled =false
return 0;
}//i added this line**
/*else if(document.getElementById('pause').disabled == true )
{document.getElementById('pause').disabled = false}*/
}
</script>
</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" onClick="SetButtonStatus()" />Start</button>
<button id="pause" type="button" onClick="SetButtonStatus()"/>Pause</button>
</div>
</body>
</html>