CODEWITHSUNDEEP
javascripthtmlcssbutton
MysteryX
MysteryX

Reputation: 105

Disabling buttons using onload funtion, javascript

I am trying to disable a number of buttons on the onload of a page, but to enable on the click of the 'start game button'. I have got the buttons disabled by adding an attribute to html but I am unable to get the buttons enabled on he click of the start button. If anyone can take a look the the code and see what is wrong with it then it will be much appreciated.

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

Upvotes: 2

Views: 11440

Answers (8)

Pew
Pew

Reputation: 3

You have to call your function inside onload callback.

Upvotes: 0

Ender
Ender

Reputation: 47

Try with this in the function Dice():

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

This code works fine to me:

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

Upvotes: 1

stranger4js
stranger4js

Reputation: 267

I will use Jquery not pure 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";
    });

or

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

that way you don't need onload attribute

Upvotes: 0

Dharmendra Kumar Mistry
Dharmendra Kumar Mistry

Reputation: 238

Just call your Startpage function on body on load. And change code as below in function.

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

Use Jquery instead. It helps you to write cleaner code. ;)

Upvotes: 0

Born2Code
Born2Code

Reputation: 1075

As people noted you will need to set disabled to false to enable the buttons. In addition the StartPage() should be removed as it does nothing.

Here is a working copy of the code you posted, i just tested it in chrome and safari and it works, if it is still not working for you then you have another problem.

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

Upvotes: 0

Mat
Mat

Reputation: 11

Too slow and can't vote up yet but yes, you should only use onload event onto the body element and the diabled attribute is for buttons or form fields, not for divs.

Upvotes: 0

Thaillie
Thaillie

Reputation: 1362

You could try calling the onload="Startpage();" on the body, i cant get it to work when its on something else than the body or in the <script> itself.

Upvotes: 0

Yair Tavor
Yair Tavor

Reputation: 2538

First - the onload on the div will not fire, since divs do not fire onload event.

You need to add the code inside the Dice() function, since this is the function being called when you click the start button:

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

Upvotes: 0

Related Questions