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

Question

我正在使用 jQuery Mobile 和 Phonegap 创建一个学习计时器，并尝试通过 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 并通过 Pause() 函数继续暂停...现在它在以下位置看不到 Pause 表单值所有...

我缺少什么来获得表单值“暂停”以更改为“恢复”？

Answer 1

如果你使用jquery，你可以这样做：
if ($('input[name=pause]').val() == "暂停") {
$('input[name=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

不要使用提交按钮，使用 。您的表单正在发布并返回一个新页面，其中按钮处于默认设置。

您可以忘记 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>

按照约定，以大写字母开头的标识符保留给构造函数，而所有大写字母开头的标识符则保留给常量。