What I would like to do is if there is clicked at the 'reset' button, the value of a other button changes. I tried to use the document.getelementbyid property but it seems not to work. Does somebody know how I should implement this?
function reset() {
stop();
x.reset();
update();
opnieuw = setTimeout(function(){
document.getElementById("scherm3").style.display = "block";
document.getElementById("scherm2.2").style.visibility = "hidden";
}, 10000);
clearTimeout(timeOut);
clearTimeout(timeOutElse);
document.getElementById("buttontimer").value = "Start";
}
setTimeout(start, 5000);
function toggleTimer(event) {
if (isTimerStarted) {
stop();
event.target.value = 'Start';
timeOut = setTimeout(function(){
document.getElementById("scherm4").style.visibility = "visible";
document.getElementById("scherm2.2").style.visibility = "hidden";
}, 4000)
clearTimeout(opnieuw);
clearTimeout(timeOutElse);
}
else {
start();
event.target.value = 'Stop';
timeOutElse = setTimeout(function(){
document.getElementById("scherm3").style.display = "block";
document.getElementById("scherm2.2").style.visibility = "hidden";
}, 8000)
clearTimeout(timeOut);
clearTimeout(opnieuw);
}
}
and HTML:
<div id="button1"><input type="button" value="Stop" onclick="toggleTimer(event); clicks5times();" id="buttontimer"></div>
<input type="button" value="Opnieuw" onclick="reset()" class="button2" id="opnieuw">
You could probably just make your code simpler by simply having a "Start" and "Stop" button, separately, and just show/hide the correct button for the current context. You are already (sort of) doing this, by showing the "Reset" button. Just make this a "Stop" button. When they click "Start", the "Start" button is hidden and the "Stop" button is shown. Click "Stop", and "Stop" is hidden and "Start" is shown. You could even use a global boolean to track state and make the "Stop" button behave like a "Pause" button, and show an additional "Reset" button that puts the timer back to 0. That all depends on what, exactly, you are trying to accomplish.