选择性激活按钮答案

【问题标题】：Selectively activate buttons选择性激活按钮
【发布时间】：2012-05-28 05:03:52
【问题描述】：

我想制作按钮，如果单击按钮 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>

已编辑 我已将“禁用”更改为“禁用”，我正在尝试让暂停按钮禁用并重新启用？

   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”
- 启动 btn -- 禁用
- 暂停 btn -- 启用
- 重置 btn -- 启用
点击“pause_btn”
- 启动 btn -- 启用
- 暂停 btn -- 禁用
- 重置 btn -- 启用
点击“reset_btn”
- 启动 btn -- 启用
- 暂停 btn -- 禁用
- 重置 btn -- 禁用

我的代码可以在这里找到 >>> >http://jsfiddle.net/fN8XD/5/

【问题讨论】：

标签： javascript button

【解决方案1】：

在您的代码中（我的包装）：

> <button id="start" type="button" start.disable = "false" 
>  onClick="loadingComplete(); SetButtonStatus()" />Start</button>

您的代码依赖于 id "start"，它被设为一个全局变量，引用 id 为 "start" 的元素，这是 IE 引入的非标准功能（为了兼容性而被其他浏览器复制），被广泛认为是非常糟糕的主意，不要使用它。

“start.disable”的按钮元素没有标准属性，因此许多浏览器不会通过相同的命名元素属性提供访问。带有句点的属性名称不能使用 javascript 点表示法访问，它必须使用方括号表示法访问。一些浏览器会将其设为element['start.disable']，但所有浏览器都会将其设为getAttribute('start.disable')。

但是，我认为您实际上是在禁用属性之后。

最后，开始标记的结束部分有一个错位的“/”，在 XML 中用于表示一个空元素。这显然不是 XML，如果是，它将导致元素标记的其余部分出现语法错误。我认为你想要的是：

<button id="start" type="button" disabled 
 onClick="loadingComplete(); SetButtonStatus()">Start</button>

还要注意，disabled 属性会导致 realted DOM 元素的 disabled 属性设置为 true（即布尔值 true，而不是字符串“true”）。因此您的代码可以是：

var start = document.getElementById('start');

if (start.disabled) {

  // toggle status
  start.disabled = false;

 } ...

等等。

注意你可以写：

if (start.disabled == true)

但上面的输入较少且等效。

【讨论】：

【解决方案2】：

使用您的代码

js fiddle demo

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

js fiddle demo

【讨论】：

-1 发帖前请先测试自己的代码，了解赋值和比较的区别。
嗨......当点击暂停按钮并且暂停被禁用时，我如何响应启动按钮？？
它不工作... function startStatus() { var start = document.getElementById('start'); if (start.disabled == true) //document.getElementById('start').disabled = true; start.disabled = 假； if(pause.disabled == true){ start.disabled = "disabled"; //pause.disabled = false; } else if (start.disabled = false") { pause.disabled = false; } }
我会测试我的代码，然后用 js fiddle thnx 回来