Logic in disabling/enabling buttonsHow to detect if JavaScript is disabled?Trigger a button click with JavaScript on the Enter key in a text boxHow can I know which radio button is selected via jQuery?Disable/enable an input with jQuery?jQuery disable/enable submit buttonDisable same origin policy in ChromeHow to check a radio button with jQuery?How does Facebook disable the browser's integrated Developer Tools?Angular - ng-disabled not working after scope changeWhy can't I get the alert to show?
How is this relation reflexive?
Why don't electromagnetic waves interact with each other?
Is it possible to make sharp wind that can cut stuff from afar?
Question about Goedel's incompleteness Proof
Do Phineas and Ferb ever actually get busted in real time?
Compute hash value according to multiplication method
Why is "Reports" in sentence down without "The"
Continuity at a point in terms of closure
When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?
A Journey Through Space and Time
Is there a familial term for apples and pears?
Possibly bubble sort algorithm
Work Breakdown with Tikz
Banach space and Hilbert space topology
How to add power-LED to my small amplifier?
What do you call a Matrix-like slowdown and camera movement effect?
How to get the available space of $HOME as a variable in shell scripting?
Download, install and reboot computer at night if needed
What would happen to a modern skyscraper if it rains micro blackholes?
Japan - Plan around max visa duration
Why are only specific transaction types accepted into the mempool?
Can I interfere when another PC is about to be attacked?
Patience, young "Padovan"
"which" command doesn't work / path of Safari?
Logic in disabling/enabling buttons
How to detect if JavaScript is disabled?Trigger a button click with JavaScript on the Enter key in a text boxHow can I know which radio button is selected via jQuery?Disable/enable an input with jQuery?jQuery disable/enable submit buttonDisable same origin policy in ChromeHow to check a radio button with jQuery?How does Facebook disable the browser's integrated Developer Tools?Angular - ng-disabled not working after scope changeWhy can't I get the alert to show?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I have a number guesser game that I am trying to implement. When my input field, noted by the id "input" is blank...my clear button should be disabled but my implementations of it does not seem to be working, any advice?
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum,userGuess)
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
// function disable()
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === '')
// document.getElementById('clear').disabled = true;
// else
// document.getElementById('clear').disabled = false;
//
//
function listeners()
let = guessInput = document.getElementById('guesser').value;
if(guessInput == '')
document.getElementById('clear').disabled = true;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>Could someone please explain the logic of implementing this? I can't seem to figure this out.
javascript dom
edited Mar 9 at 4:45
Aniket G
2,6531630
asked Mar 9 at 3:48
user3763875user3763875
695
add a comment |
0
I have a number guesser game that I am trying to implement. When my input field, noted by the id "input" is blank...my clear button should be disabled but my implementations of it does not seem to be working, any advice?
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum,userGuess)
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
// function disable()
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === '')
// document.getElementById('clear').disabled = true;
// else
// document.getElementById('clear').disabled = false;
//
//
function listeners()
let = guessInput = document.getElementById('guesser').value;
if(guessInput == '')
document.getElementById('clear').disabled = true;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>Could someone please explain the logic of implementing this? I can't seem to figure this out.
javascript dom
edited Mar 9 at 4:45
Aniket G
2,6531630
asked Mar 9 at 3:48
user3763875user3763875
695
You're missing a<form>?
– Aniket G
Mar 9 at 4:01
add a comment |
0
0
0
I have a number guesser game that I am trying to implement. When my input field, noted by the id "input" is blank...my clear button should be disabled but my implementations of it does not seem to be working, any advice?
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum,userGuess)
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
// function disable()
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === '')
// document.getElementById('clear').disabled = true;
// else
// document.getElementById('clear').disabled = false;
//
//
function listeners()
let = guessInput = document.getElementById('guesser').value;
if(guessInput == '')
document.getElementById('clear').disabled = true;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>Could someone please explain the logic of implementing this? I can't seem to figure this out.
javascript dom
edited Mar 9 at 4:45
Aniket G
2,6531630
asked Mar 9 at 3:48
user3763875user3763875
695
I have a number guesser game that I am trying to implement. When my input field, noted by the id "input" is blank...my clear button should be disabled but my implementations of it does not seem to be working, any advice?
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum,userGuess)
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
// function disable()
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === '')
// document.getElementById('clear').disabled = true;
// else
// document.getElementById('clear').disabled = false;
//
//
function listeners()
let = guessInput = document.getElementById('guesser').value;
if(guessInput == '')
document.getElementById('clear').disabled = true;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>Could someone please explain the logic of implementing this? I can't seem to figure this out.
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum,userGuess)
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
// function disable()
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === '')
// document.getElementById('clear').disabled = true;
// else
// document.getElementById('clear').disabled = false;
//
//
function listeners()
let = guessInput = document.getElementById('guesser').value;
if(guessInput == '')
document.getElementById('clear').disabled = true;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum,userGuess)
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
// function disable()
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === '')
// document.getElementById('clear').disabled = true;
// else
// document.getElementById('clear').disabled = false;
//
//
function listeners()
let = guessInput = document.getElementById('guesser').value;
if(guessInput == '')
document.getElementById('clear').disabled = true;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>javascript dom
javascript dom
edited Mar 9 at 4:45
Aniket G
2,6531630
asked Mar 9 at 3:48
user3763875user3763875
695
edited Mar 9 at 4:45
Aniket G
2,6531630
asked Mar 9 at 3:48
user3763875user3763875
695
edited Mar 9 at 4:45
Aniket G
2,6531630
edited Mar 9 at 4:45
Aniket G
2,6531630
edited Mar 9 at 4:45
Aniket G
2,6531630
2,6531630
asked Mar 9 at 3:48
user3763875user3763875
695
asked Mar 9 at 3:48
user3763875user3763875
695
asked Mar 9 at 3:48
user3763875user3763875
695
695
You're missing a<form>?
– Aniket G
Mar 9 at 4:01
add a comment |
You're missing a<form>?
– Aniket G
Mar 9 at 4:01
You're missing a
<form>?– Aniket G
Mar 9 at 4:01
You're missing a
<form>?– Aniket G
Mar 9 at 4:01
add a comment |
2 Answers
2
active
oldest
votes
0
Fixed your code snippet. You just needed to add this line: document.getElementById('input').addEventListener('input', disable);. This basically executes the function disable every time the input changes.
Also I suggest you make a variable with let input = document.getElementById('input') for all of your repeating values, so that you can easily access it.
Note: You had a few more errors that I fixed.
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
add a comment |
0
Add an 'onkeyup' event for you input.
<input id="input" type="number" name="fname" onkeyup="inputChange()" placeholder="Enter your guess">
function for onkeyup
function inputChange()
if(document.getElementById('input').value != '')
document.getElementById('clear').disabled =false;
else
document.getElementById('clear').disabled = true;
Also add disable clear code on clear click function
function clearField()
document.getElementById('input').value = "";
document.getElementById('clear').disabled = true;
By this when ever your input field is empty the clear button disabled property will be true. Hope this help
answered Mar 9 at 5:01
erTarun26erTarun26
265
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073794%2flogic-in-disabling-enabling-buttons%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Fixed your code snippet. You just needed to add this line: document.getElementById('input').addEventListener('input', disable);. This basically executes the function disable every time the input changes.
Also I suggest you make a variable with let input = document.getElementById('input') for all of your repeating values, so that you can easily access it.
Note: You had a few more errors that I fixed.
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
add a comment |
0
Fixed your code snippet. You just needed to add this line: document.getElementById('input').addEventListener('input', disable);. This basically executes the function disable every time the input changes.
Also I suggest you make a variable with let input = document.getElementById('input') for all of your repeating values, so that you can easily access it.
Note: You had a few more errors that I fixed.
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
add a comment |
0
0
0
Fixed your code snippet. You just needed to add this line: document.getElementById('input').addEventListener('input', disable);. This basically executes the function disable every time the input changes.
Also I suggest you make a variable with let input = document.getElementById('input') for all of your repeating values, so that you can easily access it.
Note: You had a few more errors that I fixed.
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
Fixed your code snippet. You just needed to add this line: document.getElementById('input').addEventListener('input', disable);. This basically executes the function disable every time the input changes.
Also I suggest you make a variable with let input = document.getElementById('input') for all of your repeating values, so that you can easily access it.
Note: You had a few more errors that I fixed.
var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>var actualNum = randomNumber();
function randomNumber()
return Math.floor(Math.random() * 101);
function findCorrectGuess(actualNum, userGuess)
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0
function reset()
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
function clearField()
document.getElementById('input').value = "";
function guessToUI()
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>$userGuess</h2><h3>$findCorrectGuess(actualNum,userGuess)</h3></center>`
function disable()
let guessInput = document.getElementById('input').value;
if (guessInput === '')
document.getElementById('clear').disabled = true;
else
document.getElementById('clear').disabled = false;
function listeners()
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('input').addEventListener('input', disable);
listeners();<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
answered Mar 9 at 4:07
Aniket GAniket G
2,6531630
2,6531630
add a comment |
add a comment |
0
Add an 'onkeyup' event for you input.
<input id="input" type="number" name="fname" onkeyup="inputChange()" placeholder="Enter your guess">
function for onkeyup
function inputChange()
if(document.getElementById('input').value != '')
document.getElementById('clear').disabled =false;
else
document.getElementById('clear').disabled = true;
Also add disable clear code on clear click function
function clearField()
document.getElementById('input').value = "";
document.getElementById('clear').disabled = true;
By this when ever your input field is empty the clear button disabled property will be true. Hope this help
answered Mar 9 at 5:01
erTarun26erTarun26
265
add a comment |
0
Add an 'onkeyup' event for you input.
<input id="input" type="number" name="fname" onkeyup="inputChange()" placeholder="Enter your guess">
function for onkeyup
function inputChange()
if(document.getElementById('input').value != '')
document.getElementById('clear').disabled =false;
else
document.getElementById('clear').disabled = true;
Also add disable clear code on clear click function
function clearField()
document.getElementById('input').value = "";
document.getElementById('clear').disabled = true;
By this when ever your input field is empty the clear button disabled property will be true. Hope this help
answered Mar 9 at 5:01
erTarun26erTarun26
265
add a comment |
0
0
0
Add an 'onkeyup' event for you input.
<input id="input" type="number" name="fname" onkeyup="inputChange()" placeholder="Enter your guess">
function for onkeyup
function inputChange()
if(document.getElementById('input').value != '')
document.getElementById('clear').disabled =false;
else
document.getElementById('clear').disabled = true;
Also add disable clear code on clear click function
function clearField()
document.getElementById('input').value = "";
document.getElementById('clear').disabled = true;
By this when ever your input field is empty the clear button disabled property will be true. Hope this help
answered Mar 9 at 5:01
erTarun26erTarun26
265
Add an 'onkeyup' event for you input.
<input id="input" type="number" name="fname" onkeyup="inputChange()" placeholder="Enter your guess">
function for onkeyup
function inputChange()
if(document.getElementById('input').value != '')
document.getElementById('clear').disabled =false;
else
document.getElementById('clear').disabled = true;
Also add disable clear code on clear click function
function clearField()
document.getElementById('input').value = "";
document.getElementById('clear').disabled = true;
By this when ever your input field is empty the clear button disabled property will be true. Hope this help
answered Mar 9 at 5:01
erTarun26erTarun26
265
answered Mar 9 at 5:01
erTarun26erTarun26
265
answered Mar 9 at 5:01
erTarun26erTarun26
265
answered Mar 9 at 5:01
erTarun26erTarun26
265
265
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073794%2flogic-in-disabling-enabling-buttons%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You're missing a
<form>?– Aniket G
Mar 9 at 4:01