javascript - how to get the input value in jquery -
i want value user inputs in text box , assign rounds, not work. line in user inputs value:
number of rounds: <input type="text" id="numrounds" name="rounds" size="6"/> and in jquery have following line
var rounds = $('#numrounds').val(); however, when run program not assigning numrounds value user inputs rounds. doing wrong? here 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 { // 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>
your javascript reads value of #numrounds on documentready, presumably "". try putting var rounds = $("#numrounds").val() inside of start.click
Comments
Post a Comment