使用onload函数，javascript禁用按钮

时间：2014-12-07 12:43:00

标签： javascript html css button

我正在尝试禁用页面上载的多个按钮，但要点击“开始游戏按钮”启用。我通过向html添加属性来禁用按钮但是我无法在单击开始按钮时启用按钮。如果有人可以查看代码并查看它有什么问题，那么我们将非常感激。

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

8 个答案:

答案 0 :(得分：1)

在Dice（）函数中尝试使用它：

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>

答案 1 :(得分：0)

首先 - div上的onload不会触发，因为div不会触发onload事件。

您需要在Dice（）函数中添加代码，因为这是单击开始按钮时调用的函数：

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

答案 2 :(得分：0)

你可以尝试在身体上调用onload="Startpage();"，当它不在身体上或在<script>本身时，我无法让它工作。

答案 3 :(得分：0)

太慢而且还不能投票但是，你应该只在body元素上使用onload事件，diabled属性用于按钮或表单字段，而不是div。

答案 4 :(得分：0)

正如人们所说，您需要将disabled设置为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>

答案 5 :(得分：0)

只需在加载时调用body上的Startpage功能。并在功能中更改代码如下。

<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代替。它可以帮助您编写更清晰的代码。 ;）

答案 6 :(得分：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属性

答案 7 :(得分：0)

您必须在onload回调中调用您的函数。

相关问题
最新问题