0

ボタン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"
        }

    }

コードが更新されました::

以下を作成したいのですが、私のコードはそれを実行しません。

  1. 「Start_btn」をクリック

    • 開始ボタン -- 無効化
    • 一時停止ボタン -- 有効にします
    • リセット ボタン -- 有効にします

  2. 「pause_btn」をクリック

    • 開始ボタン -- 有効にします
    • 一時停止ボタン -- 無効にする
    • リセット ボタン -- 有効にします

  3. 「reset_btn」をクリック

    • 開始ボタン -- 有効にします
    • 一時停止ボタン -- 無効にする
    • リセットボタン -- 無効化

私のコードはここにあります >>>> >http://jsfiddle.net/fN8XD/5/

4

2 に答える 2

0

あなたのコード（私のラッピング）で：

> <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 属性の結果として、disabled プロパティが設定されたtrue(つまり、文字列 "true" ではなくブール型の true) を持つリアル DOM 要素になることにも注意してください。したがって、コードは次のようになります。

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

if (start.disabled) {

  // toggle status
  start.disabled = false;

 } ...

等々。

次のように記述できることに注意してください。

if (start.disabled == true)

ただし、上記はタイプが少なく、同等です。

于 2012-05-28T06:14:44.690 に答える
-2

コードの作業

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フィドルのデモ

于 2012-05-28T05:21:52.310 に答える