I want to get the value the user inputs in the text box and assign it to rounds, but it does not work. This is the line in which the user inputs the value:
Number of Rounds: <input type="text" id="numRounds" name="Rounds" size="6"/> and in my jquery i have the following line
var rounds = $('#numRounds').val(); However, when I run the program it is not assigning the numRounds value that the user inputs to rounds. What am I doing wrong? Here is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="css/workitt.css" /> <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-2.1.0.min.js"></script> <script> $(function () { var rounds = $('#numRounds').val(); var states = ['work', 'rest']; var lengths = [3, 1]; // In seconds var start = $('#start'); var stop = $('#stop'); var stats = $('#stats'); var roundEl = $('#round'); var stateEl = $('#state'); var cronoEl = $('#crono'); var timer; start.click(function () { var ctimer, date; // UI start.prop('disabled', true); stop.prop('disabled', false); stats.show(); // Start round nextRound(0); function nextRound(round) { // Update UI roundEl.html(round + 1); if (round < rounds) { // Start new round nextState(round, 0); } else { // We have finished stop.click(); } } function nextState(round, state) { if (state < states.length) { stateEl.html(states[state]); // Start crono UI time = new Date(); ctimer = setInterval(crono, 15); // State timer timer = setTimeout(function () { clearInterval(ctimer); nextState(round, state + 1); }, lengths[state] * 1000); } else { nextRound(round + 1); } } function crono() { cronoEl.html((((new Date()).getTime() - time.getTime()) / 1000).toFixed(2)); } }); stop.click(function () { clearTimeout(timer); start.prop('disabled', false); stop.prop('disabled', true); stats.hide(); }); }); </script> <title>Workitt</title> </head> <body> <div class="header" style="margin: 0 auto"> <h1><img src="images/workitt-header.jpg" alt="header" /></h1> <ul id="navbar"> <li><a href="workitt.html">Home</a></li> <li> | </li> <li><a href="createworkout.html">Custom Workout</a> <ul> <li><a href="strength.html">Strength Workout</a></li> <li><a href="cardio.html">Cardio Workout</a></li> <li><a href="stretching.html">Stretching Workout</a></li> <li><a href="swimming.html">Swimming Workout</a></li> <li><a href="office.html">Office Workout</a></li> </ul> </li> <li> | </li> <li><a href="library.html">Workout Library</a> <ul> <li><a href="upperbody.html">Upper Body</a></li> <li><a href="lowerbody.html">Lower Body</a></li> <li><a href="cardiowork.html">Cardio</a></li> <li><a href="core.html">Core</a></li> </ul> </li> <li> | </li> <li><a href="accessories.html">Fitness Accessories</a> <ul> <li><a href="fitnesscalculators.html">Fitness Calculators</a></li> <li><a href="fitnesstimers.html">Fitness Timers</a></li> <li><a href="diary.html">Fitness Journal</a></li> <li><div class="clearfix"></div></li> </ul> </li> </ul> <p> </p> </div> <div> </div> <div class="body" style="margin: 0 auto"><br/> <div> Number of Rounds: <input type="text" id="numRounds" name="Rounds" size="6"/> Length of Work: <input type="text" id="numWork" name="Work" size="6"/> (seconds) Length of Rest: <input type="text" id="numRest" name="Rest" size="6"/> (seconds) </div> <div id="stats" class="stats" style="display:none;"> Round: <span id="round"></span><br/> <span id="state" class="state"></span> <span id="crono"></span><br> </div><br/> <input id="start" value="START" type="button" /> <input id="stop" value="STOP" type="button" disabled /> <br/><br/> </div> <p><br /><br /></p> <hr style="width: 30%;margin-left: auto, margin-right: auto" /> <div style="text-align:center">Created By: Danielle Hafner<br/> <script type="text/javascript"> <!-- document.write("Last Modified " + document.lastModified) // --> </script> </div> </body> </html> 
var rounds = $('#numRounds').val();need to go within your click function?