私のページには、startTimer と stopTimer 関数をそれぞれ実行する「タイマーの開始」ボタンまたは「タイマーの停止」ボタンのいずれかのボタンがいくつかあります。
startTimer 関数の間、ボタンの onclick は startTimer から stopTimer に変化し、その逆も同様です。
現時点では、ボタンをクリックすると、両方の機能が永続的に実行されます。
関数を実行してから、ボタンをもう一度クリックして反対の関数を実行できるように停止します。
私が検討してきたアプローチの 1 つは、ボタンの実行中にボタンを無効にし、関数に有効なボタンをチェックさせ、関数を実行してから、イベントを作成して再度有効にすることです。それは私が苦労している最後のビットです。
function startTimer(project) {
var url = document.URL + '?timer=start&id=' + project;
var buttonid = 'button' + project;
var button = document.getElementById(buttonid);
var stopText = 'stopTimer(' + project + ')';
if(button.disabled == false){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send();
var result = xmlhttp.responseText;
if(result == 'ok'){
button.disabled = true;
button.setAttribute("class","btn btn-danger btn-mini");
button.value = "Stop Timer";
button.setAttribute("onclick", stopTimer(project));
}
else{
alert("I couldn't start the timer.");
}
}
}
function stopTimer(project) {
var url = document.URL + '?timer=stop&id=' + project;
var buttonid = 'button' + project;
var button = document.getElementById(buttonid);
var startText = 'startTimer(' + project + ')';
if(button.disabled == false){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send();
var result = xmlhttp.responseText;
if(result == 'ok'){
button.disabled = true;
button.setAttribute("class","btn btn-sucess btn-mini");
button.value = "Start Timer";
button.setAttribute("onclick", startTimer(project));
}
else{
alert("I couldn't stop the timer.");
}
}
HTML/PHP:
<?php if(in_array($project[0], $started)){ ?>
<td>
<input type="button" class="btn btn-danger btn-mini" value="Stop Timer" onClick="stopTimer(<?php echo $project[0]; ?>)" id="button<?php echo $project[0]; ?>" />
</td>
<?php } else { ?>
<td>
<input type="button" class="btn btn-success btn-mini" value="Start Timer" onClick="startTimer(<?php echo $project[0]; ?>)" id="button<?php echo $project[0]; ?>" />
</td>
<?php } ?>