禁用并重新启用按钮

时间:2012-09-28 17:05:45

标签: javascript button timer onclick onmouseout

我的页面上有几个按钮,分别是“启动计时器”按钮或“停止计时器”按钮,它们分别运行startTimer和stopTimer函数。

在startTimer函数中,按钮的onclick从startTimer变为stopTimer,反之亦然。

此刻,一旦点击,按钮就会一个接一个地运行这两个功能。

我想让它运行该功能,然后停止准备再次点击该按钮并运行相反的功能。

我一直在探索的一种方法是在按钮运行时禁用该按钮,让功能检查启用的按钮,运行该功能,然后尝试创建一个事件以重新启用它。这是我正在努力的最后一点。

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 } ?>

1 个答案:

答案 0 :(得分:0)

我建议创建一个函数toggleTimer,并将按钮的单击绑定到该函数。因此,您只需要相应地调整请求的网址,而不是按下按钮的点击属性。

/ copypasta