Before we start, I've read more than a few other posts here related to the topic such as; How do I disable and re-enable a button in with javascript? though none of the posts seem to have solved my problem.
I am creating a mobile app in dreamweaver cs6 using html, css and javascript. The app is simple and includes a start and stop button that controls a running timer (This timer will count even while the phone is switched off because it calculates the time difference from datetime values stored in a database.)
What I want is, while the timer is running for the start button to be disabled and the stop button to be enabled and when the timer is not running for this to be reversed. I have tried several methods below which work to varying degrees.
function runningTimer()
{
var timerStarted = localStorage.getItem("timerStarted");
if (timerStarted == "true")
{
document.getElementById("runningTime").style.color="#00CC00";
document.getElementById("stopButton").removeAttribute('disabled');
document.getElementById("startButton").setAttribute("disabled", "disabled");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM temp WHERE tempID=?", [1], function(tx, result) {
for (var i = 0; i < result.rows.length; ++i) {
var row = result.rows.item(i);
var sqlStartTime = row['startTime'];
}
if (!result.rows.length)
{
alert("Error Code 420: Start Time not found.");
}
var currentTime = new Date();
var jsStartTime = convertSQLtoJS(sqlStartTime);
var shiftTimeMS = currentTime - jsStartTime;
var shiftTime = new Date(null, null, null, null, null, null, shiftTimeMS);
var shiftHours = shiftTime.getHours();
if (shiftHours < 10)
{
shiftHours = "0" + shiftHours;
}
var shiftMinutes = shiftTime.getMinutes();
if (shiftMinutes < 10)
{
shiftMinutes = "0" + shiftMinutes;
}
var shiftSeconds = shiftTime.getSeconds();
if (shiftSeconds < 10)
{
shiftSeconds = "0" + shiftSeconds;
}
document.getElementById("runningTime").innerHTML = (shiftHours + ":" + shiftMinutes + ":" + shiftSeconds);
});
});
}
else if (timerStarted == "false")
{
document.getElementById("runningTime").style.color="#FF0000";
document.getElementById("stopButton").setAttribute("disabled", "disabled");
document.getElementById("startButton").removeAttribute('disabled');
}
else
{
document.getElementById("stopButton").setAttribute("disabled", "disabled");
document.getElementById("startButton").removeAttribute('disabled');
}
}
The above code does not function the first time you use it. Either the stop or start button is disabled correctly at the start (Depending on weather or not the timer is already running when the page / app is loaded.) But once you click stop or start it does not re-enable the buttons until you refresh the page in browser or close and reopen the app on a smartphone. So, I added an onClick page load to both the start and stop buttons which works perfectly in Google Chrome however it does not work on the the smartphone.
I have also tried the following which did not work correctly either;
document.getElementById("stopButton").disabled=true;
document.getElementById("startButton").disabled=false;
I've had a few friends look over the code for me, and everybody seems to think it should work so we are all scratching our heads on what could be the problem as once you reload the page once everything works perfectly.
Any help would be fantastic and I'm sure I've just done something stupid, but please do let me know!
Kind regards, Mitchell Ransom
