JQuery click and select to Repeat a Dice Roll Using for Statement
JQuery click and select to Repeat a Dice Roll Using for Statement
This example shows how to use JQuery update the web page with results of calling a Javascript function that computes a single die roll for a hard coded number of repetitions using the Javascript for statement. The JQuery change method to choose number of rolls from select element and the JQuery click method initiates the rolls. The web browser console reports steps in code. For beginners learning Javascript and JQuery.
This builds on the JQuery click to Call Function Using a for Statement to Repeat a Dice Roll example with a select element on lines 74 to 83. This provides a preset list of the number of times the roll of the dice occurs. The id rollSelect on line 74 is used to identify the select element in JQuery. Each of the option elements on lines 75 to 82 have value attribute for the number of rolls requested.
Lines 15 to 26 select the rollSelect element and call its change method. On line 17 the JQuery val method returns the value of the option element selected. The result is placed in the diceRollValue variable.
Line 21 passes the diceRollValue variable to the getDiceRolls function
The getDiceRolls(numberOfRolls) function numberOfRolls argument is used to set the limit of the for statement on line 35.
Sample Console Output On Ready
Sample Console Output On Click
Testing to See If It Works
Open a web browser console window supports the console object for this example. In that console window you will see messages from the Javascript to help you understand what code is being executed.
If your console window was not enabled when you opened this page, then enable and refresh/reload this page to see again.