JavaScript: Попытка создать таймер, встроенный на веб-странице, с помощью jinja и JavaScript

#javascript #python #html #flask #jinja2

Вопрос:

Я новичок в JS и веб-разработке, я пытаюсь разработать страницу, содержащую несколько таймеров для моей работы, где эти таймеры будут полезны для нашего бизнеса. Вот код.

 class Timer {
    constructor(id) {
        console.log(id);
        this.value = document.getElementById("input-time" id).value;
        this.time = value*60;
        this.timer = setInterval(updateTimer, 1000); 
    }
    async updaterTimer() {
        if(time == 0) clearInterval(timer);
        this.minutes = Math.floor( this.time/60);  
        let seconds =  time % 60;
        this.seconds = seconds<10 ? '0'   seconds: seconds;
        let timeElem = document.getElementById("time-" id);
        timeElem.innerHTML = (minutes ":" seconds);
        this.time--;    
    }
}
let timers = []
function timerHandler(id) {
    timers.append(new Timer(id));
}
 

HTML:

 {% for group in user.groups %}
{% if group.active %}
<li class="list-group-item">
     Name: {{ group.full_name }}     Group ID: {{group.group_id }} 
      Phone Number: {{group.phone_number}}    Date: {{ group.time_started }}
            <div class="time" id="time-{{ group.group_id }}">00:00</div>
            <input type="text" id="input-time{{ group.group_id }}" name="input-time{{ group.group_id }}"> 
            <button type="submit" class="btn btn-primary" onClick="timerHandler({{ group.group_id }})">Enter</button>             
   {% endif %}
    <button type="button" class="close" onClick="unqeueGroup({{ group.group_id }})"
    <span aria-hidden="true">amp;times;</span>
</li>
{% endfor %}```

This code is not functional, and I am confused as to why. I am getting a "Uncaught ReferenceError: timerHandler is not defined
    at HTMLButtonElement.onclick " when I press the button, which I don't get because I defined timeHandler in that file. 

Please, all help is appreciated.
 

Ответ №1:

Возможный способ возникновения этой проблемы заключается в том, что, возможно, код недоступен, когда отображается html, и вы больше не можете использовать эту функцию. Проверьте, есть ли у вас доступ к другим переменным в области, например, с помощью onLoad:

 onLoad="console.log(Timer)"
 

Если вы не получили неопределенное значение, попробуйте скопировать/вставить имя функции.
Но если это не определено, то проверьте документацию jinja, если вы что-то упустили.