Create a table of buttons in Javascript - javascript

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.

Related

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

Jquery rpg game logic and pushing data to html

I got into jquery a few days ago and I need to build a simple game.
The game starts off with a selection of 4 characters. Once you click a character, the rest are moved to another div called enemies. From there, I select my opponent and the chosen character goes to another div called opponent. Each character has attributes for different attack power, counter attack power, and health points.
My question is: how would I assign values to the 3 attributes/variables/images so that when I click the attack button, it knows which character is in the respected divs (so that it can do the correct math such as deducting specific counter attack power your opponent has, how much hp they have left depending on which character is there, etc)?
I have looked into storing objects into an array, but got no where. The best solution I have thought of by far was to create divs and the 4 images all with their own ids and classes and then push multiple data to the html with jquery, but I'm not sure if this is allowed. For example can you do:
<div id="mydiv" data-atkPower="10" data-healthPoints="20" data-counterAtk="30"></div>`
Or by using the attr() like so:
variable.attr( 'data-atkPower', 30);
variable.attr( 'data-healthPoints', 30);
Any other suggestions for approaching this would be much appreciated
Yes you can set data attribute value for all. And whenever you want to retrieve just on their click event create some variable and retrieve its value like
var abc=$(this).data("atkPower");
And use it wherever you want.
And one more correction in your code
Dont use comma between data attribute like
<div id="mydiv" data-atkPower="10" data-healthPoints = "20" data-counterAtk = "30" ></div>

Clear page data without reloading page?

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.

Ways to incorporate dynamic update in flash cc

Currently i'm working on a flash game where i want a certain value to appear on the right side when the user types in a value on the left side.
Where the default amount is 0 and when the person types a number, the price(on the right will update accordingly.
Is it possible for this to be achieved?
*The text's fields are all set to dynamic text fields
Picture below,
Yes it is possible, but its a little more effort as i see your using the timeline animation.
Easier way to reference everything is to set up a scope of variables that can be accesses anywhere:
In your situation its best to put your whole content movie inside an Empty movieClip as a container...
Now you will have your whole movie inside the MovieClip--
Your Project Structure:
Container ---- Price.
|
--- Actions.
|
--- BTN.
Put your actions on the container layer as now you can set your variables there and create functions to interact with your buttons.. // referencing from my movieClip. As you will not have any scoping issues if you need to go to and from frames.
Give your text boxes unique names so you can reference them.
You will need to set up Event handlers to respond to your functions ();
Note: Embedd your fonts on export as Dynamic texts boxes may show up empty
Further more for idea:
For simplicity you could use an enterframe function and just check if
textbox.text = "" else--> run your function...
But it will be more appropriate to check weather text box focus or any key press/down to then check the text boxes inputs... depending on the complexity of your application and your understanding on OOP..

Onclick event with an argument = Not implemented?

Hoping for some advice here, I'm quite new to javascript and coding in general so I'm sure there are better ways to do what I need, however any help much appreciated ....
I have a piece of javascript that creates a table, the amount of rows being dynamic.
When I call the javascript I'm passing a few bits of info over, and one of these is an array. The array contains in each element a long string of text.
So I create the table with X rows showing some identifying data. I also create a radio button for each row with an on click event. The idea being that when the user clicks on the radio button, then the long string from the array element will be displayed in a separate text box.
I have managed to get to the point that the table is created and that when the radio button is selected the onclick event fires and loads a piece of data into the txt box. However that piece of data is hardcoded (txtbox.value=array[1])
What I'm now trying to do is load the relevant string from the array, depending on what radio button is clicked.
If i change my onclick event to onclick=function(ID) and my function to function(ID) I'm getting an error 'Not implented'
It appears to be generated from the onclick event rather than the function ...
The following works :
R1.onclick=clicktest;
function clicktest()
{
txtbox.value=array[1]
}
The following generates the error
R1.onclick=clicktest(1);
function clicktest(id)
{
txtbox.value=array[id]
}
Apologies if this isn't so clear.
Using this code
R1.onclick=clicktest(1);
You're executing clicktest(1) and assigning the result as event handler.
You could change it by this in to make it work
R1.onclick = function() { clicktest(1) };

Categories

Resources