Disabling buttons using onload funtion, javascript
Question
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>
8 answers
solution1
1 2014-12-07 12:50:06
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>
solution2
0 2014-12-07 12:52:58
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;
}
solution3
0 2014-12-07 12:53:53
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.
solution4
0 2014-12-07 13:00:36
太慢了，还不能投票，但是是的，您应该只在 body 元素上使用 onload 事件，并且 diabled 属性用于按钮或表单字段，而不是用于 div。
solution5
0 2014-12-07 13:31:44
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>
solution6
0 2014-12-07 13:35:28
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. ;)
solution7
0 2014-12-07 14:14:42
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
solution8
0 2014-12-13 07:12:01
您必须在onload回调中调用您的函数。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.