有选择地激活按钮

Selectively activate buttons

本文关键字：按钮激活选择地更新时间：2023-09-26

我想使按钮在单击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/

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

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

另请注意，禁用属性会导致实现的 DOM 元素将禁用属性设置为 true（即布尔值 true，而不是字符串"true"）。因此，您的代码可以是：

var start = document.getElementById('start');
if (start.disabled) {
  // toggle status
  start.disabled = false;
 } ...

等等。

请注意，您可以编写：

if (start.disabled == true)

但以上是较少的类型和等效。

正在处理你的代码

JS小提琴演示

<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小提琴演示