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('puter').src = 'card' + x + '.gif';
}
function reset() {
total = 0
document.getElementById('puter').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="puter">
<div id="p">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>
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('puter').src = 'card' + x + '.gif';
}
function reset() {
total = 0
document.getElementById('puter').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="puter">
<div id="p">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 Answers
Reset to default 1Try 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('puter').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('puter').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="puter">
<div id="p">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>
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('puter').src = 'card' + x + '.gif';
document.getElementById('higher').disabled = false;
document.getElementById('equal').disabled = false;
document.getElementById('lower').disabled = false;
}
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.
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.
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('puter').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('puter').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="puter">
<div id="p">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>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('puter').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. ;)
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('puter').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
You have to call your function inside onload callback.