Why is my jQuery Function in a function not starting?

Question

I am just learning JavaScript/jQuery today, and I am having trouble with a stopwatch I am trying to make. Here is my code:

$(document).ready(function () {
    var value = 0.0;
    $("#STARTSTOP").click(function () {
        $(this).css("value", "Stop");
        while (true) {
            value += 0.1;
            $("#TIME").delay(100).html(value);
            $(this).click(function () {
                $(this).css("Value", "Start");
                break;
            });
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>JQuery Testing Facilities</title>
    </head>
    <body>
        <input id="STARTSTOP" type="button" value="Start"></input>
        <br>
        <p id="TIME">0.0</p>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="onLoad.js"></script>
    </body>
</html>

The problem I am having is that it doesn't start, the value of my button doesn't change. I tried doing it with out the second onClick function, but then I have no way of stopping it, and the browser lags out.

value is attribute so to change it use .attr('value','stop'); and look at this may it help you http://jsfiddle.net/87x659dz/ — Mohamed-Yousef, Apr 26 '15 at 00:58
Hi Cody! Welcome to Stack Overflow. A couple things: things like "thanks" and "any help is appreciated" are considered fluff and don't belong in questions, & are removed. There's a huge precedence for this on Meta.StackOverflow, if you'd like to go read up on it. Second, grammar and spelling fixes to your post help improve the quality, so please don't rollback edits that make those fixes. Finally, mis-tagging questions is a big problem here. Questions should only include tags that *relate to the problem at hand*. The problem here is your jQuery (note the lowercase "j"), *not* any HTML or CSS. — TylerH, Apr 26 '15 at 01:01

Michael Lorton · Accepted Answer · 2015-04-26T10:26:47.790

Supposedly, Neils Bohr once dismissed a proposal with, “Your theory is not right. It's not even wrong.”

Your code is completely off-base and could not possibly work.

What you are trying to do is

 while (true) 
    wait 100ms
    update the screen

The code you wrote couldn't do that, because the delay function does not do what you think it does. But that really isn't the problem.

The real problem is, Javascript is single-threaded. If it were possible to "wait", the entire browser would lock up. (Which is why Javascript tries not to allow it at all.)

In a single-threaded environment, you would do the following:

 on the START click
   set the GO variable to true
   call the TICK function

 on the STOP click
   set the GO variable to false

 define TICK
    if the GO variable is true
       update the screen
       set a timer to invoke the TICK function in 100ms

Because it seems well within your abilities, I'll leave write the Javascript to you, except to point out that you would set the timer in the last step with the code setTimeout(tick, 100);

Good luck.

potashin · Answer 2 · 2015-04-26T00:57:43.490

2

value is a html attribute, not css property, you can use .prop or .attr methods to change it:

$(this).prop({value: 'Stop'});

and

$(this).prop({value: 'Start'});

By the way, your infinite while loop freezes the page (are you sure that it is necessary?).

edited Apr 26 '15 at 00:57

answered Apr 26 '15 at 00:52

potashin

44,205
11
83
107

score 2 · Answer 3 · edited May 23 '17 at 11:59

You want to manipulate an attribute of an html element, not a css rule. "Value" is not part of a style attribute. So you could use

$(this).prop( "value", 'Start');

or

$(this).attr('value','Start');

or

$(this).val('Start');

In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work, but properties are generally simpler to deal with than attributes. Check the docs in http://api.jquery.com/.

Also your input elements can be self closing, for example:

<input type="submit" value="Start"/>

Since you are new maybe it's better to see other stackoverflow questions How to create a stopwatch using JavaScript?

and here is another working example - http://jsfiddle.net/ezmilhouse/V2S9d/

Starting from scratch can be difficult and frustrating so it's better to play with other people's code (that's how most learn anyway). Go on and break something, ask questions and learn.

*"Go on and break something, ask questions and learn."* - Sold me on that one. — Funk Forty Niner, Apr 26 '15 at 03:36

score 1 · Answer 4 · answered Apr 26 '15 at 00:53

You're trying to set the value as if it were a css attribute, which it is not; it's an html attribute. Try $this.prop(value: 'ex'). In your case, this would be your revised line of code:

$(this).prop("value", "Start");

And you can remove that unnecessary infinite loop; it freezes the page.

Why is my jQuery Function in a function not starting?

4 Answers4