Пропустите до конца, если вы просто хотите получить ответ
Первым делом удалите ваше событие onClick из HTML и поместите его в свой скрипт. Это рекомендуемый способ настройки событий.
<button class="button clockOn">button</button>
и
var myVar = setInterval(myTimer, 1000);
var button = document.querySelector(".button");
// Add the event listener here
button.addEventListener("click", clockButton);
Теперь есть пара проблем, но наиболее заметной из них является функция clockButton,То, что вы получили здесь, является недопустимым JavaScript, вы не можете выполнить код в списке параметров функции:
function clockButton(document.querySelector(".button").toggle(".clockOn")){
...
}
Вам нужно переместить этот код в тело функции.
function clockButton () {
document.querySelector(".button").toggle(".clockOn");
...
}
Это исправляет первую проблему, которая является просто неверным кодом. Но следующая проблема, с которой вы столкнетесь, заключается в том, что toggle(...) не является функцией элемента кнопки (здесь вы можете немного запутать jQuery, что случалось со мной несколько раз). В любом случае вам не нужна эта строка кода, так что вы можете удалить ее и написать собственный переключатель класса.
Довольно просто написать переключение класса, и вы на самом деле уже делаете проверкудля класса кнопок в вашем операторе if, поэтому для вас вполне очевидно, что вы должны написать переключение класса:
if(button.hasAttribute("class","clockOn")){
...
}
Но, к сожалению, есть проблема с кодом выше. Вызов функции hasAttribute для элемента просто проверит, существует ли этот атрибут, а не имеет ли он на самом деле определенное значение. Так что в вашем случае это всегда будет верно, так как вы никогда не удаляете атрибут класса, а только меняете его на что-то другое.
Чтобы исправить это, вы можете использовать функциональность classList, которая являетсястандартно в наши дни, чтобы иметь дело с классами элементов в нативном DOM API. Вы хотите проверить, что элемент имеет класс clockOn, поэтому вы можете изменить оператор if на следующее:
if (button.classList.contains("clockOn")) {
...
}
Чтобы удалить класс, вы можете использовать функцию remove в списке классов следующим образом:
button.classList.remove("clockOn");
И вы можете добавить класс обратно, используя
button.classList.add("clockOn");
В общем, ваша функция становится такой:
function clockButton(){
if(button.classList.has("clockOn"){
clearInterval(myVar);
button.classList.remove("clockOn");
}
else {
myVarFunction();
button.classList.add("clockOn");
}
}
Теперь, когда выздесь ваша кнопка должна работать, чтобы остановить часы и перезапустить их снова, когда вы щелкнете по ним второй раз, но она еще не работает должным образом, потому что вы заметите, что если вы нажмете ее снова, время не остановится.
Это потому, что myVarFunction не переназначает новый дескриптор интервала переменной myVar. Каждый раз, когда вы звоните setInterval, вы должны получить новую ручку. Например, представьте, что при первом вызове setInterval он назначает дескриптор 123.
var myVar = setInterval(myTimer, 1000);
// myVar === 123
Теперь clearInterval(myVar) очистит интервал выполнения.
в следующий раз, когда вы устанавливаете интервал, он находится в пределах myVarFunction, скажем, например, он возвращает 456 при следующем вызове.
function myVarFunction() {
// setInterval returns `456`
setInterval(myTimer, 1000);
// myVar is still equal to `123`
}
В следующий раз, когда вы попытаетесь очистить интервал, выочищают 123 (так как вы никогда не переназначали переменную myVar), которая не существует, вы должны очистить 456, который был новым интервалом, который вы только что установили.
Так что это легко исправить
function myVarFunction() {
myVar = setInterval(myTimer, 1000);
}
TL; DR Ваш код должен выглядеть примерно так
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<!-- Remove the onclick event from here -->
<button class="button clockOn" >button</button>
</body>
</html>
var myVar = setInterval(myTimer, 1000);
var button = document.querySelector(".button");
button.addEventListener('click', clockButton);
function myVarFunction() {
myVar = setInterval(myTimer, 1000);
}
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function clockButton(){
if(button.classList.contains("clockOn")){
clearInterval(myVar);
button.classList.remove("clockOn");
}
else {
myVarFunction();
button.classList.add("clockOn");
}
}
Посмотри вживую
JSFiddle