admin管理员组文章数量:1025207
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.
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.
本文标签： htmlDisabling buttons using onload funtionJavaScriptStack Overflow
版权声明：本文标题：html - Disabling buttons using onload funtion, javascript - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1744352204a2092947.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论