選擇性地激活按鈕

我想讓按鈕這樣，如果按鈕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」
- 開始BTN - 禁用
- 暫停BTN - 使
- 復位BTN - 使
點擊「pause_btn」
- 開始BTN - 使
- 暫停BTN - 禁用
- 復位BTN - 使
點擊「reset_btn」
- 開始BTN - 使
- 暫停BTN - 禁用
- reset btn - 禁用

我的代碼可以在這裏找到>>>>> http://jsfiddle.net/fN8XD/5/

來源

2012-05-28 Lucas Li

-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

來源

2012-05-28 05:21:52 shareef

-1請在發佈前測試您的代碼，並瞭解分配和比較之間的區別。 – RobG

嗨...我怎麼反應開始btn當暫停btn點擊和暫停被禁用？ –

它不工作... function startStatus（） var start = document.getElementById（'start'）; if（start.disabled == true） //document.getElementById('start').disabled = true; start.disabled = false; if（pause.disabled == true）{ start.disabled =「disabled」; //pause.disabled = false; } else if（start.disabled =「false」） { pause.disabled = false; } } –

在您的代碼中（我的包裝）：

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

你的代碼依賴於ID「start」作爲引用ID爲「start」的元素的全局變量，這是IE引入的非標準特性（被其他瀏覽器爲了兼容而被複制）一個非常糟糕的主意，不要使用它。

「start」的按鈕元素沒有標準屬性。禁用「，所以很多瀏覽器都不會通過同一個命名的元素屬性來提供訪問權限，具有句點的屬性名稱不能使用javascript點符號來訪問，它必須使用括號表示來訪問，有些瀏覽器會使其可用爲element['start.disable']，但所有的瀏覽器將使其可作爲getAttribute('start.disable')。

不過，我認爲你是殘疾人屬性之後acually。

最後，開始標籤的結束部分有一個錯位的「/」，即在XML中使用以表示一個空元素，這顯然不是XML，如果是這樣，它會導致元素標記的其餘部分出現語法錯誤，我想你想要的是：

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

還要注意，被禁用的屬性導致了被禁用的屬性被設置爲true（即布爾值爲true，而不是字符串「true」）的實數DOM元素。因此你的代碼可以是：

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

if (start.disabled) { 

    // toggle status 
    start.disabled = false; 

} ...

等等。

請注意，你可以寫：

if (start.disabled == true)

但上面少打字和等效。

來源

2012-05-28 06:14:44 RobG

選擇性地激活按鈕

回答

相關問題