Question

我想获取用户在文本框中输入的值并将其分配给回合，但它不起作用。这是用户输入值的行：

Number of Rounds:&nbsp;<input type="text" id="numRounds" name="Rounds" size="6"/>

在我的jquery中我有以下行

    var rounds  = $('#numRounds').val();

但是，当我运行程序时，它不会将用户输入的numRounds值分配给舍入。我究竟做错了什么？这是完整的代码：

<!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>

Answer 1

你的javascript会在documentready上读取#numRounds的值，这可能总是“”。尝试将var rounds = $("#numRounds").val()放在start.click

中

Answer 2

.val()返回一个字符串。是否可以解析它的int var rounds = parseInt($('#numRounds').val(), 10);

如何在jquery中获取输入值

2 个答案: