Кнопка в моем коде работает только один раз - PullRequest
Новая
       0

Кнопка в моем коде работает только один раз

1 голос
/ 05 мая 2020

Я сделал простой код ниже:

  • HTML & CSS: 
<!DOCTYPE html>
<html>
    <head>
        <title> javaScript Console </title>
        <style>
            button { text-align:center;
                     width:200px;
                     height:30px;
                     font-size:17px;
                     font-family:courier new;
                     border:solid 2px black;
                     font-weight: bold;
                     background-color:lightblue; 
                     cursor:pointer;
                     border-radius: 20px;
                     transition: 0.5s; 
                    }

            button:hover {
                          transform: scale(1.2, 1.2);
                          font-size:19px;
                          background-color: cyan;
                    }
        </style>
    </head>
    <body style="text-align:center">
        <fieldset>
        <legend style="text-align:center;margin-bottom: -20px"><h1 id="h1" style="text-align:center;">javaScript tests on console</h1></legend>
        <p style="color:green;"> Have fun coding !</p>
        <br/> 
        <div style="text-align: center;"><button id="btn" onClick="buttonHandler()" >Show time</button></div>
        <p id="time" style="color:blue;"></p>
        <p id="tick" style="color:red;"></p>
        <p></p>
    </fieldset>
        <script src="./test.js"></script>
    </body>
</html>
  • JavaScript: 
console.log('Console is working fine !'); 

/**********************************************************************/
var x = 60;
function tick() {
    var date = new Date();
    document.getElementById("time").innerHTML = date;
    x--;
    document.getElementById('tick').innerHTML = `The time will be hidden after ${x} seconds`;

}

function clearAll(id) {
    window.clearInterval(id);
    document.getElementById('time').style.display = "none";
    document.getElementById('tick').style.display = "none";
}

function buttonHandler(e) {
    var id = window.setInterval(tick,1000);

    setTimeout(()=> clearAll(id),60000);

}

/**********************************************************************/

Но кнопка «Показать время» срабатывает только в первый раз, то при повторной попытке показать дату не срабатывает. Если я не ошибаюсь, думаю, проблема в том, что метод setInterval () работает только один раз, но я не знаю, как это исправить. Может кто подскажет, как исправить эту проблему?

1 Ответ

1 голос
/ 05 мая 2020

Это потому, что вы скрываете элемент в конце таймера в функции clearAll: 

document.getElementById('time').style.display = "none";
document.getElementById('tick').style.display = "none";

Таким образом, вы должны отображать их снова, когда вы нажимаете снова.

Также если вы нажмете кнопку несколько раз, вы запустите функцию tick несколько раз, и она будет уменьшать таймер быстрее.

Я реализовал защиту, чтобы предотвратить запуск функции несколько раз, и таймер сбрасывается . 

console.log('Console is working fine !'); 

/**********************************************************************/
var x = 60;
var isRunning = false;
function tick() {
    var date = new Date();
    document.getElementById("time").innerHTML = date;
    x--;
    document.getElementById('tick').innerHTML = `The time will be hidden after ${x} seconds`;

}

function clearAll(id) {
    window.clearInterval(id);
    document.getElementById('time').style.display = "none";
    document.getElementById('tick').style.display = "none";
    isRunning = false;
}

function buttonHandler(e) {
    if (isRunning == false) { // To prevent multiple click to run multiple tick function
        isRunning = true;
        x = 60; // Reset timer
        document.getElementById('time').style.display = "block"; // Display again
        document.getElementById('tick').style.display = "block"; // Display again
        var id = window.setInterval(tick,1000);


        setTimeout(()=> clearAll(id),60000);
    }
}

/**********************************************************************/
<!DOCTYPE html>
<html>
    <head>
        <title> javaScript Console </title>
        <style>
            button { text-align:center;
                     width:200px;
                     height:30px;
                     font-size:17px;
                     font-family:courier new;
                     border:solid 2px black;
                     font-weight: bold;
                     background-color:lightblue; 
                     cursor:pointer;
                     border-radius: 20px;
                     transition: 0.5s; 
                    }

            button:hover {
                          transform: scale(1.2, 1.2);
                          font-size:19px;
                          background-color: cyan;
                    }
        </style>
    </head>
    <body style="text-align:center">
        <fieldset>
        <legend style="text-align:center;margin-bottom: -20px"><h1 id="h1" style="text-align:center;">javaScript tests on console</h1></legend>
        <p style="color:green;"> Have fun coding !</p>
        <br/> 
        <div style="text-align: center;"><button id="btn" onClick="buttonHandler()" >Show time</button></div>
        <p id="time" style="color:blue;"></p>
        <p id="tick" style="color:red;"></p>
        <p></p>
    </fieldset>
        <script src="./test.js"></script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...