I have a simple game that produces a random number and takes a user input where the user attempts to guess the number, and the code appends each user guess to a list so they know which numbers they've guessed. There is also a "new game" (.new) link up top that the user can hit at any time to start over. Currently I have the following js:
/*--- Reset game ---*/
$(".new").click(function() {
location.reload();
});
While this works, I would prefer to change the operation so that the page doesn't need to refresh, but rather resets the code to the beginning (i.e. produces a new random number, clears the list items, etc.)
Not sure how to go about doing this. Any Ideas?
Have a function that builds the random number and the call it every time new game is clicked.
So for example have a function called generateRandomNumber() and use it the following way:
/*--- Reset game ---*/
$(".new").click(function() {
generateRandomNumber(); //Function to start everything from the beginning
});
You could have a list, and when user checks their guess, add an element to the list. For the new, just get all the li elements from the list and remove them.
Two buttons, new and check, and two click events. I've made a quick sketch:
https://codepen.io/anon/pen/oxVKJB
You could complete it with the random number generation, validation and stuff.
Related
I'm populating values in a div based on clicks to buttons on the page, but it's requiring 2 clicks for the value to change. The first part is populating the calloutAmt and calloutAmtdouble spans with the values that appear on page load, then the next part should change them based on the button clicked, but it takes two clicks to do so.
jQuery(document).ready(function($) {
$("#calloutAmt").text(selectAmt);
$("#calloutAmtdouble").text(selectAmt * 2);
$("div.donation-level-container").on("click", function() {
$("#calloutAmt").text(selectAmt);
$("#calloutAmtdouble").text(selectAmt * 2);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="matchcallout">Your gift of $<span id="calloutAmt"></span> will be DOUBLED to do $<span id="calloutAmtdouble"></span> worth of good! </div>
Well, I can't comment, because I don't have the required reputation.
That being said, nothing in your code allows us to determine issue. You would have to post the full code to get that.
BUT it seems obvious that this is working as expected and that your issue is going to lie in the setting of the variable selectAmt, which is still undefined or '' or whatever first time you click button, then gets generated by ajax or whatever.
Thus, second time you click, the variable has already been populated by the first round and is ready to be inserted into the dom. One way to check if this is indeed issue is to change the value of selectAmt between clicks and see if the value always lags one click behind of expected value. In theory, what you would want to do is set the text in the span not on click of button, but after the calculation or however selectAmt gets populated.
Hope this helps.
--edit--
Add a console.log(selectAmt) inside of the on click function... in theory, this will be empty first click but not second, confirming my mentioned suspicions above.
I have created a website ( link here ) where the breeders at the middle of the page are shown random whenever someone enters the page.
I was wondering if it would be possible that if someone goes from the homepage to another page, then presses back button, the breeder order to be the same as it was when he first entered the website.
Right now the order changes every time someone enters the homepage.
Suppose you have the breeders per string, something like
$div[0]='<div>My breeder 1</div>';
$div[1]='<div>My breeder 2</div>';
$div[2]='<div>My breeder 3</div>';
$div[3]='<div>My breeder 4</div>';
and an array
$my_breeders=[0,1,2,3];
If you shuffle the array, you will get something like
$my_breeders=[1,3,2,0];
this is the order you display your divs in. Put this in a string and write it to a cookie.
$order=implode('-',$my_breeders); //gives a string: 1-3-2-0
setcookie('breederorder',$order,time()+(30*60) )
the next time someone visits the page, check for the cookie
if(!empty($_COOKIE['breederorder'])){
$my_breeders=explode('-',$_COOKIE['breederorder']);
}
Now you have the same array as before.
Note, I set the cookie time at half an hour (30*60). If you set it too long, the next time a visitor comes to your page, het will still get the same order.
You can save the state from the order of your elements in a cookie and prevent the randomize function, if a cookie is set.
I am new to javascript and I need to make a black jack style game. I need to create a table of replicated buttons in a 6x6 row(36 buttons total). They will display an x unless pressed and then they will generate a random number 1 to 9 and add it to a total score in a global variable. If the buttons clicked put you over 21 then you lose but if you get a score of exactly 21 you will win the game and a pop up message will prompt the user of their win.
I not sure how to make a table and then replicate the buttons. I also would like to know how to change the value of the button from x to a random number.
The game will look something like this.
I am not asking for the full game to be done for me I just want to know how to replicate buttons in a table, point them all to the same function, and change the value displayed on the button when one is clicked. If you can show me an example of anyone of those concepts I would greatly appreciate it.
how to make a table and then replicate the buttons
Use loops to repeat the same code several times. You can put the code that sets up a button in a loop to make many buttons.
how to change the value of the button
If you're using an input element for the button, the value property lets you change its label.
to a random number
Math.random gives you a random number. You can build some logic around this to get what you want.
how to ... point them all to the same function
You can use event listeners to run code when the user clicks an element.
There is a function in HTML5 that shows you the range of buffered time ranges in a video. I want to show the last added 'buffered' section, but this is proving to be quite difficult.
Basically when you click on a time in a video (lets say 00:16), the video begins to buffer if its not already. So we end up with a buffer that goes like 16s-18s, then 16s-20s, etc as the video loads. Now lets say we click somewhere else before that in the video where it is not buffered. So I click on 00:05. The 'buffered' array will have 16-20s and 5s-6s or however much is loaded.
HOWEVER, the 5s-6s will be added BEFORE the 16s-20s in the time range array. That means that we can't just select the last element of an array as the newest buffered section, rather we have to select the first element. Then if you click somewhere else before the 5s mark you end up with the first part of the array being a different value. Since they are added in this fashion I can't find the latest buffer section added.
What is the best way to go about finding this?
The easiest way to do this would be to make a copy of the TimeRanges object in the buffer property every time something new is added to the buffer. You can then use this "history" to find the order in which time ranges were added.
For example, with jQuery:
var history = [];
$(yourvideo).on("seeked",function(){
history.push(jQuery.extend({}, this.buffered));
});
In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)
First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.