I'm trying to build a guessing game, where the computer automatically generates a number between 1-100 and the user has 5 chances to guess the number. Between guesses I want to clear the input field. There is a hint button that can tell the user "lower" or "higher" and there is a div that shows how many guesses are remaining. There is also a play again button.
I've built the html, css and some of the JS but I'm getting stuck with a for loop.
The JS/HTML is:
<input type="text" id="playersGuess" placeholder="Input Number 1-100" class="form-control input" >
<h3 id="status"></h3>
<button onclick='playersGuessSubmission()' type="button" id="playersGuess"class="btn btn-lg btn-info submit">Submit Your Guess</button>
var playersGuess,
winningNumber
// Generate the Winning Number
function generateWinningNumber(){
winningNumber = Math.floor(Math.random() * 100);
console.log(winningNumber);
}
generateWinningNumber();
// Fetch the Players Guess
function playersGuessSubmission(){
playersGuess = parseInt($('#playersGuess').val());
console.log(playersGuess);
lowerOrHigher();
}
// Determine if the next guess should be a lower or higher number
function lowerOrHigher(){
var guessesRemaining=5;
for(i=guessesRemaining; i>0; i-- ) {
if (playersGuess > winningNumber){
console.log('lower');
guessesRemaining -= 1;
// $('remaining span').html(guessesRemaining);
console.log(guessesRemaining);
// return;
// playersGuessSubmission()
} else if (playersGuess < winningNumber) {
console.log('higher');
guessesRemaining -= 1;
// $('remaining span').html(guessesRemaining);
console.log(guessesRemaining);
// return;
// playersGuessSubmission()
} else {
console.log('you win')
return;
}
}
}
Currently, the computer generates a random number, the user is able to guess, and then the user runs through the loop console.logging out remaining guesses down to 0 without allowing the user to input any other guesses. Adding the return line in each 'if' statement ends the loop and the remaining guesses never decreases and the user is able to input infinitely until they guess correctly. Adding the playersGuessSubmission() function to each 'if' statement results in an infinite loop.
I'm new to learning JS (and doing it on my own) so any guidance is truly appreciated! Thanks in advance.
See JSFiddle here: http://jsfiddle.net/njpatten/qo1d63da/1/ Feel free to change console.log to alerts or replace div text.
Instead of using a for loop I would recommend to use a global variable to keep track of remaining guesses and decrement it by 1 each time the user takes a guess and the remainingGuesses > 0.
Your way does not wait for user input but rather checks the same value 5 times in a row. Something like this should work:
var guessesRemaining = 5;
function lowerOrHigher(){
if (guessesRemaining > 0){
guessesRemaining--;
if (playersGuess > winningNumber){
console.log('lower');
// $('remaining span').html(guessesRemaining);
console.log(guessesRemaining);
} else if (playersGuess < winningNumber) {
console.log('higher');
// $('remaining span').html(guessesRemaining);
console.log(guessesRemaining);
} else {
console.log('you win')
return;
}
}
else {
console.log('You ran out of guesses');
}
}
Not exactly sure if this would solve your problem, but going through the issues one at a time:
1:
I think the player runs out of guesses, because you loop for the number of guess decreasing the number of guesses each time, so the loop continues until the guesses are zero basically.
2:
If you add the return statement, the user's guesses never goes down because each time the button is pressed you call the lowerOrHigher() function again and you are setting guesses equal to five in the function
3:
For this exact same reason you get an infinite loop for calling the playerGuessSubmission() function, because the playerGuessSubmission() function calls lowerOrHigher() which in turn sets user guesses to five, allowing the loop to run again, calling playerGuessSubmission again, etc, etc
What I would do, is create an onload function with your jquery setting the initial number of guesses to five when the page loads:
$( document ).ready(function() {
guessesRemaining = 5;
});
And then only reset guessesRemaining = 5 when you call the PlayAgain() function as indicated in your JSFiddle, which I assume will be an "onclick" of the Play Again button:
function playAgain(){
guessesRemaining = 5;
}
From there I would remove the for loop completely, so that the lowerOrHigher() is called on button click only, and decides each time the button is clicked whether or not he guessesRemaining -= 1, or to console.log("You Won").
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="text" id="playersGuess" placeholder="Input Number 1-100" class="form-control input" >
<h3 id="status"></h3>
<button onclick='playersGuessSubmission()' type="button" id="playersGuess"class="btn btn-lg btn-info submit">Submit Your Guess</button>
<script>
var playersGuess,
winningNumber
// Fetch the Players Guess
function playersGuessSubmission(){
winningNumber = Math.floor(Math.random() * 100);
console.log(winningNumber +"winning");
playersGuess = parseInt($('#playersGuess').val());
console.log(playersGuess+ "guess");
if(playersGuess <winningNumber)
{
console.log("guess higher");
}
else if(playersGuess >winningNumber)
{
console.log("guess lower");
}
else
{
console.log("correct");
}
$('#playersGuess').val('');
}
// Determine if the next guess should be a lower or higher number
function lowerOrHigher(){
}</script>
</body>
</html>
Here is my suggestion
I changed the IDs of the buttons, they must be different and not the same as other variable names
DEMO
/* **** Global Variables **** */
// try to elminate these global variables in your project, these are here just to start.
var playersGuess, winningNumber, guessesRemaining;
/* **** Guessing Game Functions **** */
// Generate the Winning Number
function generateWinningNumber() {
winningNumber = Math.floor(Math.random() * 100);
guessesRemaining=5;
console.log(winningNumber);
$('#remaining').html(guessesRemaining+" left");
}
// Fetch the Players Guess
function playersGuessSubmission() {
playersGuess = parseInt($('#playersGuess').val(),10);
console.log(playersGuess);
lowerOrHigher();
}
// Determine if the next guess should be a lower or higher number
function lowerOrHigher() {
guessesRemaining--;
if (guessesRemaining<=0) {
$('#remaining').html("You lose");
return;
}
if (playersGuess > winningNumber) {
console.log('lower');
console.log(guessesRemaining);
$('#remaining').html("too high "+guessesRemaining+" left");
} else if (playersGuess < winningNumber) {
console.log('higher');
$('#remaining').html("too low "+guessesRemaining+" left");
} else if (playersGuess == winningNumber) {
$('#remaining').html("you win "+guessesRemaining+" left");
guessesRemaining=0;
}
else {
$('#remaining').html(playersGuess + " is not valid, "+guessesRemaining+" left");
}
}
//continues to console.log false, een when the winning number is set to 24
// Check if the Player's Guess is the winning number
function checkGuess() {
// add code here
}
// Create a provide hint button that provides additional clues to the "Player"
function provideHint() {
// add code here
}
// Allow the "Player" to Play Again
function playAgain() {
// add code here
generateWinningNumber();
}
/* **** Event Listeners/Handlers **** */
$(function() {
generateWinningNumber();
$("#playersGuessBut").on("click",function(e) {
e.preventDefault();
playersGuessSubmission();
});
$("#playAgain").on("click",playAgain);
});
I'm new to learning JS (and doing it on my own) so any guidance is truly appreciated!
I suggest you to learn javascript using something like :
Codeschool they have good javascript learning path for newcomers and basic courses are free.
or Coursera
According this
Adding the return line in each 'if' statement ends the loop and the remaining guesses never decreases and the user is able to input infinitely until they guess correctly
You define number of guesses in beggining of function. So every time you enter in it will be asigned with initial value (5).
Related
I am currently working on a stopwatch app, where you can set your values (in minutes, seconds, and hours) and it would count down until it reaches zero. The problem is that it would only go down for a single second then stop working entirely. What is the problem here?
let hours = document.getElementById('hours')
let mins = document.getElementById('minutes')
let secs = document.getElementById('seconds')
let submit = document.getElementById('submit')
let time = document.getElementById('time')
let runningProgramKey = null;
submit.addEventListener('click', startTimer)
function startTimer() {
//window.variable is not a flaw, I am using it to define a global variable inside the function
window.hoursX = Math.abs(parseInt(hours.value)) || 0;
window.minsX = Math.abs(parseInt(mins.value)) || 0
window.secsX = Math.abs(parseInt(secs.value)) || 0
window.timeX = `${hoursX}:${minsX}:${secsX}`
time.textContent = timeX;
runTime();
}
function runTime() {
if (runningProgramKey) clearInterval(runningProgramKey);
runningProgramKey = setInterval(() => {
time.textContent = updateTime(hoursX,minsX,secsX);
},1000)
}
function updateTime(hours,minutes,seconds) {
//I know I can use ternary operators however I am not (for a reason)
if (seconds - 1 > 0) {
seconds--;
if (minutes >= 1 && seconds === 0) {
minutes--;
}
}
return `${hours}:${minutes}:${seconds}`;
}
function clearTime() {
}
<!DOCTYPE html>
<html>
<head>
<title>StopwatchApp</title>
<script defer src='script.js'></script>
</head>
<body>
<div>
<input id='hours' type='text' placeholder="Hours">
<input id='minutes' type='text' placeholder="Minutes">
<input id='seconds' type='text' placeholder="Seconds">
<input id='submit' type='button' value='Go'>
</div>
<h1 id='time'>HH:MM:SS</h1>
</body>
</html>
Just for clarification and to save people's time, the error is not if (runningProgramKey) clearInterval(runningProgramKey); I know because I did multiple things, even commenting that line out and the error still proceeds.
To see a visualization of what happens press run snippet which should be under my code. It gives you another clear idea on what is the problem.
My code is not finished, therefore some functionality would be questioning, such as the seconds stopping at 0. This isn't a complete script, and I came to get help on my error so that I can continue working on the project.What I don't like is the fact that people in the comments section are not simply acknowledging this, and complaining about the matter. Next time please read to identify what the problem actually is before attempting to post rants in the comment section. I'm not "ranting" on the people who 'want to help' I am "ranting" on the people who halfly read the question and want to try and insult me for the code, even them knowing that the code is not complete.
when you pass the number as a parameter to a function a copy of parameter is created in stack,if you change the variable ,just its copy will change and the original variable won't change.
you should use global variable.
function updateTime() {
//I know I can use ternary operators however I am not (for a reason)
if (secsX- 1 > 0) {
secsX--;
if (minsX>= 1 && secsX=== 0) {
minsX--;
}
}
return `${hoursX}:${minsX}:${secsX}`;
}
I try to disable Apply button when application deadline is over. I used php and I successfully got time on each button. Now different time is print on different button.
<td><input type='submit' value='Apply' id='button' name='button' date-time='$closedate' /></td>
I used jquery/ javascript to disable button after expired time (after deadline of application), it cannot disable and it always enable.
In the code below code I used for disable button but it not works.
<script>
$(document).ready(function() {
var timer = setInterval(function() {
var current = $("#button").data('time');
// get the current value of the time in seconds
var newtime = current - 1;
if (newtime <= 0) {
// time is less than or equal to 0
// so disable the button and stop the interval function
$("#button").prop('disabled', true);
clearInterval(timer);
} else {
// timer is still above 0 seconds so decrease it
$("#button").data('time', newtime);
}
}, 1000);
});
</script>
based on what you have put down, it seems there are a few simple errors that need to be looked at
1) looks like a simple typo -- date-time should be data-time
2) you are not actually outputting the value of $closedate try changing it to
without knowing what the value of $closedate is, we won't be able to help further than that
Here is a fiddle that replicates an example...https://jsfiddle.net/o2gxgz9r/6656/
Your main issue is that you are mispelling the data-time attribute in your code as date-time. Your html should be as follows...
<input type='submit' value='Apply' id='button' name='button' data-time='$closedate' />
After fixing that, you should be able to reference the data value. Moreover, you are not updating the data value, so every time setInterval is called, the variable $closedate remains the same, and so the if statement if (newtime <= 0) is never reached...
var timer = setInterval(function() {
// get the current value of the time in seconds
var current = $("#button").data('time');
// decrement the time
var newtime = current - 1;
// update $closedate
$("#button").data('time', newtime);
if (newtime <= 0) {
// time is less than or equal to 0
// so disable the button and stop the interval function
$("#button").prop('disabled', true);
clearInterval(timer);
} else {
// timer is still above 0 seconds so decrease it
$("#button").data('time', newtime);
}
}, 1000);
I am not sure what the value of $closedate is but I made an assumption in my fiddle.
A few of issues...
First, in your HTML, you have date-time instead of data-time, so when you go to get the attribute later with: $("#button").data('time'), you won't get anything.
Second, you must remember to convert HTML data (which is always a string) to numbers to do math with them.
Third, you need to verify that $closedate is a string that can be converted into a valid number. You indicated in a comment below that $closedate will be something like: 2017-03-17. But that is not a value that you can subtract from.
Lastly, updating the HTML is costly in terms of performance. You are modifying the data-time attribute upon each iteration of your setInterval(), which is roughly every second. This can and should be avoided. It can be done by keeping the time left in a variable instead of writing it back to the document.
Here's a working version:
$(document).ready(function() {
// Always cache references to elements you will use more than once:
var $btn = $("#button");
// When gettting data from HTML, you get strings. You must convert
// them to numbers to do math with them. Also, we are using 5 seconds
// here instead of $closedate for testing purposes.
var current = parseInt($btn.data('time'), 10);
// Initialize the newtime for comparison
var newtime = current;
var timer = setInterval(function() {
newtime--; // Decrease the time left
// Just testing the variables:
console.log(current, newtime);
if (newtime <= 0) {
// time is less than or equal to 0
// so disable the button and stop the interval function
$btn.prop('disabled', true);
clearInterval(timer);
}
current--; // Decrease the counter
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' value='Apply' id='button' name='button' data-time='5'>
Here we have a simple practice javascript game , it has a list of valid HTML colors, it picks a random color when the page is loaded , it asks you for guesses and gives you hints based on your input, when you enter the correct color , it changes the background color to the color of the answer.
when you enter the winning answer , you get an alert to tell you that you've won, for some reason the background color only changes after i press ok when the alert appears on the screen, even though the statement that changes the bg color precedes the alert.
My questions are:
(1) why is the BG color changing after i close the alert popup ?
(2)whats the correct way to make the BG color change before the alert appears on the screen?
function do_game() {
var colors = ["aqua", "beige", "deeppink" , "coral", "honeydew", "lime", "gainsboro","rebeccapurple","peru","tan"].sort();
var answer = colors[Math.floor((Math.random() * colors.length))];
var finished = 0;
var numberOfGuesses = 0;
var myBody=document.getElementsByTagName("body")[0];
console.log(answer);
while(!finished){
var input = prompt('I am thinking of one of these colors \n\n' + colors + '\n\n what color am i thinking of? ' );
if(input === null)
finished = 1;
else{
numberOfGuesses++;
checkGuess(input);
if(input === answer){
myBody.style.background=answer;
finished = 1;
alert('You are right! \n you took ' + numberOfGuesses + ' Guesses!');
}
}
}
function checkGuess(input){
if(colors.indexOf(input) === -1){
//does not recognize input
alert('I don’t recognize that color!');
}else if(input > answer){
//alphabetically higher
alert('Your input is alphabetically higher than mine!');
}else if(input < answer){
//alphabatially lower
alert('Your input is alphabetically lower than mine!');
}
}
}
The browser won't repaint the screen until the function which has updated the DOM has finished running.
alert is blocking, so prevents that function from continuing to run until you click OK.
Put the alert in another function and use setTimeout to call it in a non-blocking way.
document.body.style.background = "blue";
setTimeout(function() {
alert("Hello");
});
I'm a newbie teaching myself how to code using a course through udemy.com. I'm in the process of learning Javascript and as a project we're instructed to created a simple Javascript game. Basically you enter a number that you think the computer is thinking. So far when you enter the correct number and click submit, a box will appear that states "Yay! That's exactly how many fingers I'm holding up!" or if it is not correct it will state "Sorry that's not correct, my number was .."
The problem is I can't figure out how to add additional if statements. For example I'm trying to alert a message that states "oops you need to enter a number" when the user clicks the submit button without entering a number or letter in the box. And when they've guessed the correct number of 0, the alert message will state "That's right, I have no fingers up!"
Here is the code that allows me to do the two instructions I listed above correctly:
<p>How many fingers am I holding up?</p>
<input id="answer"/>
<button id="myButton"><strong>Submit</strong></button>
<script type="text/javascript">
document.getElementById("myButton").onclick=function() {
var x=Math.random();
x=6*x;
x=Math.floor(x); //use floor to get whole number
if (x==document.getElementById("answer").value) {
alert("Yay! That's exactly how many fingers I'm holding up!");
} else {
alert("Sorry that's not correct! My number was" + x );
}
}
</script>
What am I doing wrong here?
Thanks in advance!
Here's a revised script, the problem was with the .value property. Please work on your indentation.
Follow this link for full code JS fiddle
document.getElementById("myButton").onclick = function() {
var x = Math.random();
var y = document.getElementById("answer");
x = 6 * x;
x = Math.floor(x); //use floor to get whole number
if (y.value === "") {
alert("Oops, you need to enter a number!");
} else if (x == y.value) {
if (x == 0) {
alert("That's right, I have no fingers up!");
} else {
alert("Yay! That's exactly how many fingers I'm holding up!");
}
} else {
alert("Sorry that's not correct! My number was " + x);
}
}
var x = Math.random();
x = 6*x;
x = Math.floor(x); //use floor to get whole number
var y = document.getElementById("answer").value;
if(y == null){
alert("Please enter a number");
}else{
if (x == y) {
if(x == 0){
alert("Yay! I'm not holding any fingers up!");
}else{
alert("Yay! That's exactly how many fingers I'm holding up!");
}
} else {
alert("Sorry that's not correct! My number was" + x );
}
}
Here's a JSfiddle of a guessing game I'm making: http://jsfiddle.net/JMqxq/13/
So far everything is working great, but the part that displays the remaining guesses isn't working the way I want it to. It starts out at 3 and goes down by one each time you have an incorrect guess, which is what I want, but once you run out of guesses I want you to revert back to level one and have the remaining guesses go back to 3 since you are starting over. It successfully starts the game over, but the display of the count gets stuck at 0 (even though it's actually back to 3). I also want the displayed guesses remaining to go back up to 3 after you get a correct guess (while moving up a level), but it doesn't. Can anyone help me fix this? Here is the actual code in question:
HTML:
<p id="result">Guess a color.</p>
<p>Remaining guesses: <span id="guesses">3</span></p>
<h2>Level <span id="level">1</span></h2>
Javascript/JQuery:
function correct(){
document.getElementById("result").innerHTML = "You are correct! Guess another color.";
level++;
reset();
}
function incorrect(){
document.getElementById("result").innerHTML = "Sorry, you are incorrect.";
guesses--;
document.getElementById("guesses").innerHTML = guesses;
if (guesses == 0){
level = 1;
reset();
document.getElementById("result").innerHTML = "Guess a color";
}
}
function reset(){
$(".box").animate({"opacity": "1"}, "slow");
guesses = 3;
temp = Math.floor((Math.random()*6)+1);
document.getElementById("level").innerHTML = level;
}
function rand(){
temp = Math.floor((Math.random()*6)+1);
$("div.box").click(function() {
if (temp == $(this).data("id")) {
correct();
} else {
$(this).animate({"opacity": "0.25"}, "slow");
incorrect();
}
});
}
You need to add
document.getElementById("guesses").innerHTML = guesses;
into your reset function.