Olá, Acompanhei os cursos anteriores e me ajudou a resolver muitas questões que tinha em relação ao django. Entretanto, estou desenvolvendo uma aplicação que possui um timer em que o usuário clica no botão "iniciar", e uma função no javacript faz a contagem do timer e exibe na tela. Quando coloco o javascript e o html juntos, o timer funciona, mas quando separo nos arquivos statics e templates, exibe o conteúdo do timer na tela, mas clico no botão iniciar e não tem nenhuma ação. Como faço para executar essa ação? Consegue me indicar algum material?
html:
div class="container-fluid">
<div class="row text-center">
<!-- <div class="text-primary">Pomodoro Timer</div> -->
<p id="display">1:00</p>
<!--<button id="more" class="bt1 ">+</button>
<button id="less" class="bt1">-</button>
-->
</div>
<div id="timer" class="pieChart slice"></div>
<button id="go" class="bt2" style="margin-top: 3%" onclick="{% static 'js/teste.js' %}">Iniciar</button>
<!--<button id="pause" class="bt2" >Pause</button>
<button id="reset" class="bt2" >Stop/Reset</button>
-->
</div>
JavaScript:
// JQuery code to be added in here.
var tf;
var start;
var length;
var end;
var x;
var now;
var remaining;
var minutes;
var seconds;
var d;
var i;
var left;
var right;
var line=[];
var slice;
var pauseTime;
var pauseLength;
//show default value when page is loaded
$(document).ready(function (){
tf = 1;
$('#display').html('1:00');});
function display () {
$('#display').empty().html(tf + ':00');
}
//user to add mins
$('#more').on('click',function() {
tf = tf + 1 ;
display();
});
//user to minus mins
$('#less').on('click',function() {
if (tf > 1) {
tf = tf - 1;
display();
}
});
// Update the count down every 1 second
function a () {
x = setInterval(function () {
// Get the time when the user clicks
now = $.now();
// Find the distance between now and the count down time
remaining = end - now;
// Time calculations for days, hours, minutes and seconds
minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.round((remaining % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
if (seconds == 60) {
document.getElementById("display").innerHTML = "1:00";
}
else if (seconds < 10) {
document.getElementById("display").innerHTML = minutes + ":0" + seconds;
}
else document.getElementById("display").innerHTML = minutes + ":" + seconds;
// If the count down is finished, write some text
if (remaining < 0) {
clearInterval(x);
document.getElementById("display").innerHTML = "END";
}
//to animate the pie
d = 360 / length;
i = length - remaining;
right = -90 + d * i;
left = -90 + d * i - 180;
//rotates the red, shows blue on the right
if (right < 90) {
line = ['linear-gradient(' + right + 'deg, #008000 50%, transparent 50%)',
'linear-gradient(-90deg, #FF0000 50%, transparent 50%)'];
}
//rotates the blue, shows blue on both sides
else {
line = ['linear-gradient(' + left + 'deg, #FF0000 50%, transparent 50%)',
'linear-gradient(-90deg, #FF0000 50%, transparent 50%)'];
}
//to update the class of the pie
slice = $('#timer').css({
'background-image': line.join(',')
});
}, 1000);
}
//user to start or resume
$('#go').on('click', function () {
//to start
if (isNaN(pauseTime)) {
start = $.now();
length = tf * 60 * 1000;
end = start + length;
a();
}
//to resume
else {
start = $.now();
end = start + pauseLength;
a();
}
});
`