I've added a progress bar from jQuery UI plug-in and I don't want to control it from value like this (as is the default setting):
$("#progressBar").progressbar({
value: 30.59
});
Instead I want to control it directly from my HTML. I have this code in my HTML:
<span class="counter">30.59</span>
<div id="progressBar" ></div>
And this code in my JS:
var counter = $(".counter");
$("#progressBar").progressbar({
value: counter
});
What am I doing wrong?
You need to get the text of the .counter element:
var counterValue = parseFloat($(".counter").text());
$("#progressBar").progressbar({ value: counterValue });
The code $(".counter") returns a jQuery span object, which assigned to a progress bar value is no use to you.
The code you need is:
var couterValue = parseFloat($(".counter").text());
$("#progressBar").progressbar({ value: counter });
Another thing to think about is when this code runs.
If this code is executed only once on page load, the progress bar will only show the initial value for the span object.
I can't imagine this code being much help to you, as whatever is updating the counter span tag will also need to trigger a copy into the progress bar and therefore should put the value there directly.
As far as I know you can not capture events for text changing on DOM objects that are not form controls.
