CODEWITHSUNDEEP
javascriptjqueryhtmlinput
user3570263
user3570263

Reputation: 5

how to get the input value in jquery

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:&nbsp;<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>&nbsp;|&nbsp;</li>
            <li><a href="createworkout.html">Custom&nbsp;Workout</a>
                <ul>
                    <li><a href="strength.html">Strength&nbsp;Workout</a></li>
                    <li><a href="cardio.html">Cardio&nbsp;Workout</a></li>
                    <li><a href="stretching.html">Stretching&nbsp;Workout</a></li>
                    <li><a href="swimming.html">Swimming&nbsp;Workout</a></li>
                    <li><a href="office.html">Office&nbsp;Workout</a></li>
                </ul>
            </li>
            <li>&nbsp;|&nbsp;</li>
            <li><a href="library.html">Workout&nbsp;Library</a> 
                <ul>
                    <li><a href="upperbody.html">Upper&nbsp;Body</a></li>
                    <li><a href="lowerbody.html">Lower &nbsp;Body</a></li>
                    <li><a href="cardiowork.html">Cardio</a></li>
                    <li><a href="core.html">Core</a></li>
                </ul>
            </li>
            <li>&nbsp;|&nbsp;</li>
            <li><a href="accessories.html">Fitness&nbsp;Accessories</a> 
                <ul>
                    <li><a href="fitnesscalculators.html">Fitness&nbsp;Calculators</a></li>
                    <li><a href="fitnesstimers.html">Fitness&nbsp;Timers</a></li>
                    <li><a href="diary.html">Fitness&nbsp;Journal</a></li>
                    <li><div class="clearfix"></div></li>
                </ul>
            </li>
      </ul>
      <p>&nbsp;</p>
      </div>    
      <div>&nbsp;</div>
      <div class="body" style="margin: 0 auto"><br/>
        <div>
            Number of Rounds:&nbsp;<input type="text" id="numRounds" name="Rounds" size="6"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Length of Work:&nbsp;<input type="text" id="numWork" name="Work" size="6"/>&nbsp;(seconds)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Length of Rest:&nbsp;<input type="text" id="numRest" name="Rest" size="6"/>&nbsp;(seconds)
        </div>
        <div id="stats" class="stats" style="display:none;">
            Round: <span id="round"></span><br/>
            <span id="state" class="state"></span>
            &nbsp;&nbsp;&nbsp;&nbsp;<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>

Upvotes: 0

Views: 178

Answers (2)

Andreas Storvik Strauman
Andreas Storvik Strauman

Reputation: 1655

.val() returns a string. Does it work to parse the int of it var rounds = parseInt($('#numRounds').val(), 10);

Upvotes: 0

Pat Newell
Pat Newell

Reputation: 2294

your javascript reads the value of #numRounds on documentready, which will presumably always be "". Try putting var rounds = $("#numRounds").val() inside of start.click

Upvotes: 3

Related Questions