Javascript Onclick事件仅起作用一次

Question

This javascript calls up a timer that countdowns if certain variables are met. While the countdown is happening it hides the original button and replaces it with another button so that the event can't be called again during the countdown. However, after the countdown ends nothing happens when you click the button again.

<div id="set_upgrade">
    <input id="upgrade" type="button" value="Upgrade" />
</div>
<div id="set_upgrading" style="display:none">
    <input id="upgrading" type="button" value="Upgrade" />
</div>
<br><br><br><br>
<p id="countdown_timer"></p>
    <script>
        document.getElementById("countdown_timer").innerHTML = ("<span id='countdown' class='timer' style='display:block'></span>");
        document.getElementById('upgrade').onclick=timer;
        document.getElementById('upgrading').onclick=alert_box;

        function display_timer(){
        };

        function alert_box(){
            alert("You are currently upgrading this module.");
        };

        var currently_upgrading = 0;
        var current_ore         = 398;
        var current_crystal     = 398;
        var upgradeTime         = 3;
        var seconds             = upgradeTime;

        var su                  = document.getElementById('set_upgrade');
        var su2                 = document.getElementById('set_upgrading');
        var su3                 = document.getElementById('countdown');

        function timer() {
            if(currently_upgrading == 1){alert('You are already upgrading a module.');return;}
            if(current_ore <= 299){alert('You need more ore.');return;}
            if(current_crystal <= 299){alert('You need more crystal.');return;}

            su.style.display = "none";
            su2.style.display = "block";
            su3.style.display = "block";
            var days        = Math.floor(seconds/24/60/60);
            var hoursLeft   = Math.floor((seconds) - (days*86400));
            var hours       = Math.floor(hoursLeft/3600);
            var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
            var minutes     = Math.floor(minutesLeft/60);
            var remainingSeconds = seconds % 60;            
            if (remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds; 
            }
            document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
            if (seconds == 0) {
                su.style.display = "block";
                su2.style.display = "none";
                su3.style.display = "none";
            } else {
                seconds--;
                setTimeout(timer, 1000);
            }
        }
    </script>

Answer 1

First of all you don't need to open and close the <script> tag every time you need to do something, then instead of doing onclick="alert_box();" , try it this way.

function alert_box(){
    alert("You are currently upgrading this module.");
};
document.getElementById('upgrading').onclick=alert_box;