Question

我正在使用jQuery Mobile和Phonegap创建一个Study Timer，我正在尝试通过JS更改表单值。

表格价值：

 <form action="javascript:void(null);" id="theTimer" name="theTimer">
     <input id="timerDisplay" type='text' name="theTime" readonly/>
     <br />
     <input type='submit' name="start" value="Start" onclick="Start()"/>
     <input type='submit' name="stop" value="Stop" onclick="Stop()"/>
     <input type='submit' name="pause" value="Pause" onclick="Pause()"/>
  </form>

JS代码：

function Pause() {
    if (timerID) {
        clearTimeout(timerID);
    }
    if (myTimer) {
        clearInterval(myTimer);
    }
    if (document.theTimer.pause.value == "Pause") {
        document.theTimer.pause.value = "Resume";
    } else {
        document.theTimer.pause.value = "Pause";
        tToday = new Date();
        total_time = tToday.getTime() - tDiff;
        tStart = new Date(total_time);
        timerID = setTimeout(UpdateTimer, 1000);
        startTimer();
    }
}

问题在于，当我使用另一个框架时，表单值Pause将更改为Resume和Resume以暂停通过Pause（）函数...现在它根本看不到Pause表单值... < / p>

我缺少什么来形成值暂停更改为恢复？

Answer 1

如果你正在使用jquery，你可能会这样做： if（$（'input [name = pause]'）。val（）==“Pause”）{ $（ '输入[名称=停顿]'）VAL（ “恢复”）。 }

而不是

if（document.theTimer.pause.value ==“Pause”）{ document.theTimer.pause.value =“恢复”; }

Answer 2

您的函数中变量的范围令人困惑，因为您已在所有变量上省略了var关键字。我首先要清理你的变量声明，并使用jQuery的强大功能，而不是通过DOM手动对抗来设置值：

 <form action="javascript:void(null);" id="theTimer" name="theTimer">
     <input id="timerDisplay" type="text" name="theTime" readonly="readonly" />
     <br />
     <input type="submit" name="start" id="start" value="Start"/>
     <input type="submit" name="stop" id="stop" value="Stop"/>
     <input type="submit" name="pause" id="pause" value="Pause"/>
  </form>

我删除了您的onclick事件并修复了您的readonly属性和引号。我认为部分问题在于您在单击按钮时提交表单并且页面正在回发。当发生这种情况导致意外行为时，您的计时器正在重置。我正在使用jQuery添加函数：

$(function() {
    $('#start').click(function() {
        Start();
        return false;
    });
    $('#stop').click(function() {
        Stop();
        return false;
    });
    $('#pause').click(function() {
        Pause();
        return false;
    });
});

var timerID, myTimer;

function Pause() {
    if (timerID) {
        clearTimeout(timerID);
    }
    if (myTimer) {
        clearInterval(myTimer);
    }
    if ($('#pause').val() == "Pause") {
        $('#pause').val("Resume");
    } else {
        $('#pause').val("Pause");
        var tToday = new Date();
        var total_time = tToday.getTime() - tDiff;
        var tStart = new Date(total_time);
        timerID = setTimeout(UpdateTimer, 1000);
        startTimer();
    }
}

也许您可以用startTimer()和UpdateTimer()填写问题中的空白？另外，你还没有真正解释你的问题究竟是什么你可以放纵我们吗？

Answer 3

请勿使用提交按钮，请使用<input type="button" ...>。您的表单正在发布并返回一个新页面，其中包含默认设置中的按钮。

你可以忘记xml风格的标记，它只是浪费了字符。 void是一个运算符，而不是一个函数，因此您不需要使用分组运算符（）跟随它。你无论如何都不需要它，所需的动作属性可以是任何东西，在这种情况下'＃'就足够了 - 如果表单没有提交，它就不会去任何地方。

<form action="#" id="theTimer" name="theTimer">
    <input id="timerDisplay" type="text" name="theTime" readonly>
    <br>
    <input type="button" name="start" value="Start" onclick="Start()">
    <input type="button" name="stop" value="Stop" onclick="Stop()">
    <input type="button" name="pause" value="Pause" onclick="Pause()">
</form>

按照惯例，以大写字母开头的标识符为构造函数和标识符保留，并带有常量的所有字母。

JS或jQuery问题更改表单对象的值

3 个答案: