Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2018, 10:00
Интересующийся
Отправить личное сообщение для goofy1337 Посмотреть профиль Найти все сообщения от goofy1337
 
Регистрация: 11.04.2018
Сообщений: 10

Вызов element.onclick
Всем привет. У меня есть готовый рабочий код таймера обратного отсчета. Передо мной стоит задача, добавить конструктор и передать туда ID кнопок. С помощью этих ID вызывать при клике (element.onclick) в самом javascript файле. Но у меня что-то не работает, не могу найти ошибку. Раньше Onclick был в Html файле как атрибут элемента, но теперь нужно это сделать при помощи javascript.

Заранее благодарю за помощь.

Вот JS

class Timer {
    
    constructor(id1, id2) {
        this.idStart = id1;
        this.idReset = id2;
        document.getElementById(this.idStart).onclick = this.start();
        document.getElementById(this.idReset).onclick = this.resetTimer();
    }
    
    countDown() {
        this.s--;
        
        if (this.s < 0) {
            this.s = 59;
            this.m--;
        }
        
        if (this.m < 0) {
            this.m = 59;
        } 
        
        if (this.s + this.m == 0) {
            resetTimer();
        }
        
        this.s = this.s + "";
        this.m = this.m + "";
        
        if (this.s.length < 2) { 
            this.s = "0" + this.s;
        }
        
        if (this.m.length < 2) { 
            this.m = "0" + this.m;
        }
        
        document.getElementById("tm").innerHTML = this.m + ":" + this.s; 
    }    
       
    resetTimer(){             
            clearInterval(this.timerId);
            
            this.m = 0;
            this.s = 0;
            
            document.getElementById("tm").innerHTML = '00' + ':' + '00';
            document.getElementById("minutes").value = "";
            document.getElementById("minutes").removeAttribute("disabled", "");
            
            this.status = 0;
        }
   
    start(){   
        document.getElementById("minutes").setAttribute("disabled", "");
        
        this.m = +document.getElementById("minutes").value;
        this.s = 0;
        this.status = 0; 
        this.timerId;
          
        if(!this.status){
            this.status = 1;
            this.timerId = setInterval(this.countDown.bind(this), 1000);
        }
    }
}


Вот код HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Timer</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="newcss.css"> 
        <link rel="shortcut icon" href="#">
    </head>
    <body> 
            <div id="tm">00:00</div>
            <label>Write minutes</label><br>
            <input type="number" id="minutes">
            <input type="button" value="Start" id="start-button">
            <input type="button" value="Reset" id="reset-button"> 
            <script type="text/javascript" src="newjavascript.js"></script>            
            <script>
                var timer = new Timer("start-button", "reset-button");
            </script>
    </body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2018, 11:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,719

Сообщение от goofy1337
У меня есть готовый рабочий код таймера обратного отсчета
Сообщение от goofy1337
Но у меня что-то не работает, не могу найти ошибку.
Так рабочий или нет?

Строки 6-7 должны быть такими:
document.getElementById(this.idStart).onclick = this.start.bind(this);
        document.getElementById(this.idReset).onclick = this.resetTimer.bind(this);

Еще можно сохранять не ID контроллов, а ссылки на них самих, в этом случае не придется каждый раз их искать.
Ответить с цитированием
  #3 (permalink)  
Старый 17.04.2018, 12:35
Интересующийся
Отправить личное сообщение для goofy1337 Посмотреть профиль Найти все сообщения от goofy1337
 
Регистрация: 11.04.2018
Сообщений: 10

Сообщение от Nexus Посмотреть сообщение
Так рабочий или нет?

Строки 6-7 должны быть такими:
document.getElementById(this.idStart).onclick = this.start.bind(this);
        document.getElementById(this.idReset).onclick = this.resetTimer.bind(this);

Еще можно сохранять не ID контроллов, а ссылки на них самих, в этом случае не придется каждый раз их искать.
Спасибо большое
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое подключение JS и вызов функции Paqwerty Events/DOM/Window 1 25.04.2017 16:33
Вызов функции через new Object() RblSb Общие вопросы Javascript 5 31.05.2015 19:12
?!Множественный вызов contextMenu!? fen0man jQuery 3 22.05.2012 10:02
Явный вызов процедуры обработки события. supchik Общие вопросы Javascript 18 27.01.2009 13:16