如何使用Javascript动态点击更改按钮事件

Question

我使用java脚本制作了一个反向计时器。我添加了单独启动和重置按钮，但需要在点击时更改按钮功能。如果我点击开始，然后启动功能应该运行，并在开始重置按钮的地方应该来了，再次点击复位后，复位功能应该启动并开始按钮应该来。我怎样才能做到这一点。请建议。

下面是代码

var interval; 
    var minutes = 1; 
    var seconds = 00; 

    function countdown(element) { 
     interval = setInterval(function() { 
      var el = document.getElementById(element); 
      if(seconds == 0) { 
       if(minutes == 0) { 
        alert(el.innerHTML = "countdown's over!");      
        clearInterval(interval); 
        return; 
       } else { 
        minutes--; 
        seconds = 60; 
       } 
      } 
      if(minutes > 0) { 
       var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
      } else { 
       var minute_text = ''; 
      } 
      var second_text = seconds > 1 ? 'seconds' : 'second'; 
      el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
      seconds--; 
     }, 1000); 
    } 
var renew = document.getElementById('renew'); 
renew.onclick = function() { 
    minutes = 1; 
    seconds = 00; 
    clearInterval(interval); 
    interval = null; 

    countdown('countdown');  
} 

var start = document.getElementById('start'); 
start.onclick = function() { 
    document.getElementById('renew').onclick = function (event){ 
     <input type="button" value="renew" id="renew" /> 
    }; 
    if (!interval) { 
     countdown('countdown'); 
    } 
} 

HTML代码：

<div id="topmain"> 
     <div style="margin-left:15px; float:left;"> 
      <input type="button" value="start" id="start" /> 
      <input type="button" value="renew" id="renew" /> 
      <div id='countdown' style="color:#0FC; margin-left:5px; " > 

      </div> </div> 

Answer 1

此处查看代码，

http://jsfiddle.net/86W5B/2/

所有你需要做的就是将显示和隐藏的按钮一样，

start.style.display = 'block'; 
renew.style.display = 'none'; 

和

start.style.display = 'none'; 
renew.style.display = 'block'; 

下面是完整的代码，

<div id="countdown"></div> 
<input type="button" id="start" value="Start"> 
<input type="button" id="renew" value="renew" style="display:none"> 

<script> 
var interval; 
    var minutes = 1; 
    var seconds = 00; 

    function countdown(element) { 
     interval = setInterval(function() { 
      var el = document.getElementById(element); 
      if(seconds == 0) { 
       if(minutes == 0) { 
        alert(el.innerHTML = "countdown's over!"); 
        start.style.display = 'block'; 
        renew.style.display = 'none';   
        clearInterval(interval); 
        return; 
       } else { 
        minutes--; 
        seconds = 60; 
       } 
      } 
      if(minutes > 0) { 
       var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
      } else { 
       var minute_text = ''; 
      } 
      var second_text = seconds > 1 ? 'seconds' : 'second'; 
      el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
      seconds--; 
     }, 1000); 
    } 

var renew = document.getElementById('renew'); 
var start = document.getElementById('start'); 

renew.onclick = function() { 
    minutes = 1; 
    seconds = 00; 
    clearInterval(interval); 
    interval = null; 

    countdown('countdown'); 
    start.style.display = 'block'; 
    renew.style.display = 'none'; 

} 


start.onclick = function() { 
    start.style.display = 'none'; 
    renew.style.display = 'block'; 

    if (!interval) { 
     countdown('countdown'); 
    } 
} 
</script> 
​ 

Answer 2

重叠的按键和隐藏复位按钮，切换到显示其他按钮被点击时，一个..