1. 首頁
  2. 問答
  3. 使用onload函數禁用按鈕，java腳本

使用onload函數禁用按鈕，java腳本

2014-12-07 12 views
2

我試圖禁用頁面的onload上的一些按鈕，但啓用點擊'開始遊戲按鈕'。我已經通過向html添加屬性來禁用按鈕，但是我無法通過單擊開始按鈕來啓用按鈕。如果任何人都可以看看代碼，看看它有什麼問題，那麼它將非常感激。使用onload函數禁用按鈕，java腳本

<html> 
    <head> 
     <title>Christmas Assignment</title> 

     <link rel="stylesheet" type="text/css" href="xmasass_1.css"> 
     <script type="text/javascript"> 
      function Dice() { 
       var x = Math.floor(Math.random() * 13) + 1; 
       document.getElementById('computer').src = 'card' + x + '.gif'; 
      } 

      function reset() { 
       total = 0 
       document.getElementById('computer').src = 'dieDefault.gif'; 
       document.getElementById('img2').src = 'dieDefault.gif'; 
       document.getElementById('score').innerHTML = "0" + total; 
      } 

      function Startpage() { 
       document.getElementById('buttons_1').disabled = true; 
      } 
     </script> 
    </head> 
    <body> 
     <div id="settings"> 
      <img src="settings_img.png" width="60" height="60"> 
     </div> 
     <div id="bodydiv"> 
      <h1> Card Game</h1> 
      <img src="back.gif" id="computer"> 
      <div id="comp">Computer</div> 
      <div id="arrow"> 
       <img src="arrow2.png" width="100" height="100"> 
      </div> 
      <img src="back.gif" id="player"> 
      <div id="play">Player</div> 
      <div id="kittens"> 
       <button id="startButton" value="Throw" onclick="Dice();">Start Game</button> 
       <div id="buttons_1" onload="Startpage();"> 
        <button id="higher" disabled>Higher</button> 
        <button id="equal" disabled>Equal</button> 
        <button id="lower" disabled>Lower</button> 
       </div> 
       <button id="draw">Draw your card</button> 
       <div id="resetscore"> 
        <a href="url">Reset Score </a> 
       </div> 
      </div> 
      <div id="score"></div> 
     </div> 
    </body> 
</html>

來源

2014-12-07 MysteryX

回答

1

嘗試這種在功能骰子（）：

document.getElementById('higher').disabled = false; 
document.getElementById('equal').disabled = false; 
document.getElementById('lower').disabled = false;

此代碼工作正常對我說：

<html> 
<head> 
    <title>Christmas Assignment</title> 
    <link rel="stylesheet" type="text/css" href="xmasass_1.css"> 
    <script type="text/javascript"> 
    function Dice() { 
     var x = Math.floor(Math.random() * 13) + 1; 
     document.getElementById('computer').src = 'card' + x + '.gif'; 

     document.getElementById('higher').disabled = false; 
     document.getElementById('equal').disabled = false; 
     document.getElementById('lower').disabled = false; 
    } 
    function reset() { 
     total = 0 
     document.getElementById('computer').src = 'dieDefault.gif'; 
     document.getElementById('img2').src = 'dieDefault.gif'; 
     document.getElementById('score').innerHTML = "0" + total; 
    } 

    </script> 
</head> 
<body> 
    <div id="settings"> 
    <img src="settings_img.png" width="60" height="60"> 
    </div> 
    <div id="bodydiv"> 
    <h1> Card Game</h1> 
    <img src="back.gif" id="computer"> 
    <div id="comp">Computer</div> 
    <div id="arrow"> 
     <img src="arrow2.png" width="100" height="100"> 
    </div> 
    <img src="back.gif" id="player"> 
    <div id="play">Player</div> 
    <div id="kittens"> 
     <button id="startButton" value="Throw" onclick="Dice();">Start Game</button> 
     <div id="buttons_1"> 
     <button id="higher" disabled>Higher</button> 
     <button id="equal" disabled>Equal</button> 
     <button id="lower" disabled>Lower</button> 
     </div> 
     <button id="draw">Draw your card</button> 
     <div id="resetscore"> <a href="url">Reset Score </a> 
     </div> 
    </div> 
    <div id="score"></div> 
    </div> 
</body> 
</html>

來源

2014-12-07 12:50:06 Ender

+0

仍然沒有出於某種原因！:( – MysteryX 2014-12-07 13:02:10

+0

用新的代碼 – Ender 2014-12-07 16:22:26

+0

試試現在我開始遊戲按鈕不工作.. – MysteryX 2014-12-07 19:27:49

0

第一 - 在格在onload不會火，因爲divs不會觸發onload事件。

您需要添加的骰子（）函數中的代碼，因爲這是當您單擊開始按鈕被調用的函數：

function Dice() { 
     var x = Math.floor(Math.random() * 13) + 1; 
     document.getElementById('computer').src = 'card' + x + '.gif'; 

     document.getElementById('higher').disabled = false; 
     document.getElementById('equal').disabled = false; 
     document.getElementById('lower').disabled = false; 
}

來源

2014-12-07 12:52:58

+0

感謝您的幫助，但仍然不工作不幸.. – MysteryX 2014-12-07 13:01:28

0

你可以嘗試調用對身體的onload="Startpage();"，我不能當它不在身體之外或在其本身時，讓它工作。

來源

2014-12-07 12:53:53 Thaillie

0

太慢了，不能投票了，但是，你應該只使用onload事件到body元素上，而diabled屬性是爲按鈕或表單字段，而不是div。

來源

2014-12-07 13:00:36 Omniarchos

0

正如人們所指出的，您需要將禁用設置爲false才能啓用按鈕。另外，StartPage（）應該被刪除，因爲它什麼都不做。

這裏是你發佈的代碼的工作副本，我剛剛在Chrome和Safari瀏覽器中測試過它，它的工作原理，如果它仍然不適合你，那麼你有另一個問題。

<html> 
 
<head> 
 
    <title>Christmas Assignment</title> 
 
    <link rel="stylesheet" type="text/css" href="xmasass_1.css"> 
 
    <script type="text/javascript"> 
 
    function Dice() { 
 
     var x = Math.floor(Math.random() * 13) + 1; 
 
     document.getElementById('computer').src = 'card' + x + '.gif'; 
 
     document.getElementById('higher').disabled = false; 
 
     document.getElementById('equal').disabled = false; 
 
     document.getElementById('lower').disabled = false; 
 
     
 
     
 
    } 
 
    function reset() { 
 
     total = 0 
 
     document.getElementById('computer').src = 'dieDefault.gif'; 
 
     document.getElementById('img2').src = 'dieDefault.gif'; 
 
     document.getElementById('score').innerHTML = "0" + total; 
 
    } 
 
    
 
    </script> 
 
</head> 
 
<body> 
 
    <div id="settings"> 
 
    <img src="settings_img.png" width="60" height="60"> 
 
    </div> 
 
    <div id="bodydiv"> 
 
    <h1> Card Game</h1> 
 
    <img src="back.gif" id="computer"> 
 
    <div id="comp">Computer</div> 
 
    <div id="arrow"> 
 
     <img src="arrow2.png" width="100" height="100"> 
 
    </div> 
 
    <img src="back.gif" id="player"> 
 
    <div id="play">Player</div> 
 
    <div id="kittens"> 
 
     <button id="startButton" value="Throw" onclick="Dice();">Start Game</button> 
 
     <div id="buttons_1" > 
 
     <button id="higher" disabled>Higher</button> 
 
     <button id="equal" disabled>Equal</button> 
 
     <button id="lower" disabled>Lower</button> 
 
     </div> 
 
     <button id="draw">Draw your card</button> 
 
     <div id="resetscore"> <a href="url">Reset Score </a> 
 
     </div> 
 
    </div> 
 
    <div id="score"></div> 
 
    </div> 
 
</body> 
 
</html>

來源

2014-12-07 13:31:44 Born2Code

0

只需撥打您的起始功能上身體上的負荷。在函數中更改如下代碼。

<script type="text/javascript"> 
//Your ohter functions here 
    function Dice() { 
      document.getElementById('higher').disabled = false; 
      document.getElementById('equal').disabled = false; 
      document.getElementById('lower').disabled = false; 


      var x = Math.floor(Math.random() * 13) + 1; 
      document.getElementById('computer').src = 'card' + x + '.gif'; 
    } 

    function Startpage() 
    { 
     document.getElementById('higher').disabled = "disabled"; 
     document.getElementById('equal').disabled = "disabled"; 
     document.getElementById('lower').disabled = "disabled"; 

    } 
</script> 

<body onload="Startpage();"> 
<!--Your stuffs here --> 
</body>

改爲使用jquery。它可以幫助你寫出更乾淨的代碼。 ;）

來源

2014-12-07 13:35:28

0

我將使用jQuery並不是純粹的JS

function Dice() { 
      document.getElementById('higher').disabled = false; 
      document.getElementById('equal').disabled = false; 
      document.getElementById('lower').disabled = false; 


      var x = Math.floor(Math.random() * 13) + 1; 
      document.getElementById('computer').src = 'card' + x + '.gif'; 
    } 

    $(document).load(function(){ 
    document.getElementById('higher').disabled = "disabled"; 
$(document).load(function(){ 
$("#higher").attr({disabled:"true"}); 
$("#equal").attr({disabled:"true"}); 
$("slower").attr({disabled:"true"}); 
}); 
     document.getElementById('equal').disabled = "disabled"; 
     document.getElementById('lower').disabled = "disabled"; 
    });

或

$(document).load(function(){ 
    $("#higher").attr({disabled:"true"}); 
    $("#equal").attr({disabled:"true"}); 
    $("slower").attr({disabled:"true"}); 
    }); 
<body> 
<!--Your stuffs here --> 
</body>

這樣你就不需要onload屬性

來源

2014-12-07 14:14:42 stranger4js

+0

感謝您的回覆，但我不能使用jquery這個項目不幸x – MysteryX 2014-12-07 15:27:06

0

你必須調用裏面onload回調你的函數。

來源

2014-12-13 07:12:01 Pew

相關問題

 相關問題