JS or jQuery Problem Changing Values Of Form Object

I am using the jQuery Mobile and Phonegap to create a Study Timer and I am trying to change a form value through JS.

The form value:

 <form action="javascript:void(null);" id="theTimer" name="theTimer">
     <input id="timerDisplay" type='text' name="theTime" readonly/>
     <br />
     <input type='submit' n开发者_如何学Goame="start" value="Start" onclick="Start()"/>
     <input type='submit' name="stop" value="Stop" onclick="Stop()"/>
     <input type='submit' name="pause" value="Pause" onclick="Pause()"/>
  </form>

The JS code:

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();
    }
}

The problem is that when I was using another framework the form value Pause would change to Resume and Resume to pause through the Pause() function... now it doesn't see the Pause form value at all...

What am I missing to get to form value Pause to change to Resume?

If you are using jquery, you could be doing: if ($('input[name=pause]').val() == "Pause") { $('input[name=pause]').val("Resume"); }

instead of

if (document.theTimer.pause.value == "Pause") { document.theTimer.pause.value = "Resume"; }

The scope of the variables within your function is confusing because you've omitted the var keyword on all of them. I would first clean up your variable declarations, and use the power of jQuery instead of manually fighting your way through the DOM to set values:

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

I removed your onclick events and fixed your readonly attribute, and your quotes. I think part of the problem is that you were submitting the form when clicking the buttons and the page was posting back. Your timers were resetting when this happened causing unexpected behavior. I'm adding back the functions using 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();
    }
}

Perhaps you could fill in the gaps in your question with what startTimer() and UpdateTimer() do? Also, you haven't really explained what your issue is exactly... could you indulge us?

Don't use submit buttons, use <input type="button" ...>. Your form is posting and returning a new page with the buttons in their default settings.

You can forget the xml-style markup, it's just wasted characters. And void is an operator, not a function, so you don't need to follow it with the grouping operator (). You don't need it anyway, the required action attribute can be anything, '#' is sufficient in this case - if the form isn't submitted, it won't go anywhere.

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

By convention, identifiers starting with a capital letter are reserved for constructors and identifiers with all captial letters for constants.