Good day fellow developers. Please entertain what must seem like a very simple question: I have a basic countdown with the intent of counting down to 5 and loops continually.
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
function intervalCountDown() {
var counter = 5;
countDownDiv.innerHTML = counter--;
}
The problem is that it's not counting down, for what reason I don't know. Here is a fiddle I've created if that helps.
You redefine your counter every time countDown called.
To prevent this, you should define variable in outer scope.
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
countDownDiv.innerHTML = counter--;
}
<span id="countDown"></span>
You can also create something more reusable:
function countDown(from, time, el) {
el.innerHTML = from;
var i = setInterval(tick, time);
function tick() {
el.innerHTML = --from;
if (from <= 0) clearInterval(i);
}
}
countDown(100, 1000, document.getElementById('c1'));
countDown(10, 5000, document.getElementById('c2'));
<span id="c1"></span><hr/>
<span id="c2"></span>
Just put your var counter outside the function intervalCountDown()
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
countDownDiv.innerHTML = counter--;
}
Initialize your counter outside the function.
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
countDownDiv.innerHTML = counter--;
}
You create a new counter variable each tick. Move counter out of the tick function:
var countDownDiv = document.getElementById('countDown');
var counter = 5;
window.setInterval(intervalCountDown, 1000);
function intervalCountDown() {
countDownDiv.innerHTML = counter--;
}
<div id="countDown"></div>
You are redeclaring the counter variable in every turn. Fix: http://jsfiddle.net/4tpcdtdj/1/
var countDownDiv = document.getElementById('countDown');
var counter = 5;
var countInterval = setInterval(intervalCountDown, 1000);
function intervalCountDown() {
if (counter <= -1) {
clearInterval(countInterval);
return;
}
countDownDiv.textContent = counter--;
}
You redefining counter variable with value 5.
You can use closure as below
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown(), 1000);
function intervalCountDown() {
var counter = 5;
return function(){
countDownDiv.innerHTML = counter--;
if(counter==0) // Re-initiate counter
counter = 5;
}
}
Your variable counter declared in Locally so again and again assign the same value counter = 5. That is the problem below display my correction
var bingoDiv = document.getElementById('bingo');
window.setInterval(intervalBingo, 5000);
function intervalBingo() {
var newNum = Math.floor(Math.random() * 75) + 1;
bingoDiv.innerHTML = newNum;
}
// basic countdown
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
if (counter == 0) {
counter =5;
}
countDownDiv.innerHTML = counter--;
}
// number randomizer
var bingoDiv = document.getElementById('bingo');
var counter = 5;
var counter_interval = false;
window.setInterval(intervalBingo, 5000);
function intervalBingo() {
var newNum = Math.floor(Math.random() * 75) + 1;
counter = 5;
bingoDiv.innerHTML = newNum;
clearInterval(counter_interval);
countDownDiv.innerHTML = counter--;
counter_interval = window.setInterval(intervalCountDown, 1000);
}
// basic countdown
var countDownDiv = document.getElementById('countDown');
function intervalCountDown() {
countDownDiv.innerHTML = counter--;
}
<div id="bingo"></div>
<hr>
<div id="countDown"></div>
i thing like this, you can try this.
Try this,
var num = document.getElementById("countDown");//Get value from div.
var counter = 5; //Declaring counter value.
num.innerHTML = counter;//assigning counter value to num variable
function deg(){
counter--;//decrementing counter value.
num.innerHTML = counter;//getting output in div using innerHTML
if(counter <= 0){ //if couter value reaches or goes below 0 then stop
// decrementing of counter value.
window.clearInterval(st);
}
}
var st = window.setInterval(deg,1000);
Related
i tried to add a simple random number generater upto 10. When code is excecuted its working fine and generating random numbers. after that i added a condition that when function generate 5 random number function should stop working, So I added clearInterval() function but there is no change in output.
var stop = setInterval(timer, 1000);
var t = 0;
function timer() {
var count = 0;
var X = document.getElementById("timer");
var rnumber = Math.floor(Math.random() * 10);
X.innerHTML = rnumber;
count++;
if (count == 5) {
clearInterval(stop);
}
}
<body>
<div id="timer">0</div>
</body>
You are resetting count to 0 every time. Here's how to do it
function timer() {
if (!this.count) this.count = 0;
var X = document.getElementById("timer");
var rnumber = Math.floor(Math.random() * 10);
X.innerHTML = rnumber;
this.count++;
if (this.count == 5) {
clearInterval(stop);
}
}
var stop = setInterval(timer, 1000);
function timer() {
console.log("running");
if (!this.count) this.count = 0;
var X = document.getElementById("timer");
var rnumber = Math.floor(Math.random() * 10);
X.innerHTML = rnumber;
this.count++;
if (this.count == 5) {
clearInterval(stop);
console.log("stopped");
}
}
<div id="timer">a</div>
So, I'm trying to create a random text generator in Javascript using Math.floor and Math.random which I combine with countdown timers using Javascript as well. However, the result after the countdown value has been <= 0 does not appear random text that I have made in the function.
In fact, it appears undefined. How's the solution? The script I created is below.
<button id="btn" style="background-color:red;width:30px;height:30px;"></button>
<script>
var timer = 5;
var id;
function create_random_string(string_length){
var random_string = 'X-';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'
for (var i, i=0; i < string_length; i++){
random_string += characters.charAt(Math.floor(Math.random() * characters.length))
}
}
function starButton() {
this.style.display = 'none';
id = setInterval(function () {
timer--;
if (timer <= 0) {
clearInterval(id);
document.getElementById("script").innerHTML = create_random_string(5);
} else {
document.getElementById("script").innerHTML = timer + " seconds to get Code";
} }, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = starButton;
</script>
<div id="script"></div>
You were not returning anything from your function. If you don't return function value how it will get it! Check this now.
var timer = 5;
var id;
function create_random_string(string_length){
debugger;
var random_string = 'X-';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'
for (var i, i=0; i < string_length; i++){
random_string += characters.charAt(Math.floor(Math.random() * characters.length))
}
return random_string;
}
function starButton() {
this.style.display = 'none';
id = setInterval(function () {
timer--;
if (timer <= 0) {
clearInterval(id);
document.getElementById("script").innerHTML = create_random_string(5);
} else {
document.getElementById("script").innerHTML = timer + " seconds to get Code";
} }, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = starButton;
<button id="btn" style="background-color:red;width:30px;height:30px;"></button>
<div id="script"></div>
I'm trying to mimic the look of a stock-exchange board, but can't seem to automatically change text without stopping another.
I've tried
var text = ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"];
var counter = 0;
var elem = document.getElementById("n1");
var inst = setInterval (change, 1000);
function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n1");
if (counter >= text.length) {
counter = 0;
}
}
var text = ["-12.0%", "-13.7%", "-13.9%", "-12.8%", "-13.9%"];
var counter = 0;
var elem = document.getElementById("n2");
var inst = setInterval (change, 1000);
function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n2");
if (counter >= text.length) {
counter = 0;
}
}
To no avail.
You can't have two different functions with the same name. One will override the other.
I created a single function that accomplishes your goals by passing in the target element and the data as arguments.
function change(elem, data) {
let counter = 0;
setInterval(function() {
elem.innerHTML = data[counter];
counter++;
if (counter >= data.length) {
counter = 0;
}
}, 1000);
}
change(document.getElementById("n1"), ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"]);
change(document.getElementById("n2"), ["12.0%", "2.7%", "3.9%", "4.8%", "5.9%"]);
<div id="n1"></div>
<div id="n2"></div>
i started js a few days ago and made a slider that changes the images when the button is clicked and a timer that changes images automatically every 5 sec. But when i clicked the buttons the timer didnt reset. I used clearInterval to stop the timer but i dont know how to call it to restart it. Here is my Js code.
//progression bar
var width = 1;
//the images
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
//the buttons
const suivant = document.getElementById('button1');
const precedent = document.getElementById('button2');
//change image every 5 sec
var counter = 0;
var imageChange;
imageChange = setInterval (function () {
if (counter >= 2 ){
counter -= 2;
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 5000);
//make buttons work
precedent.onclick = function() {
width = 0;
clearInterval(imageChange);
//I know i have to put something on this line with v imageChange but i dont know what
if (counter <= 0){
counter += 2;
document.getElementById("currentImage").src = images[counter];
}
else{
document.getElementById("currentImage").src = images[--counter];
};
}
suivant.onclick = function() {
width = 0;
clearInterval(imageChange);
//I know i have to put something on this line with imageChange but i dont know what
if (counter >= 2 ){
counter -= 2;
document.getElementById("currentImage").src = images[counter];
}
else{
document.getElementById("currentImage").src = images[++counter];
};
}
//progression bar
function progression(){
var progres = document.getElementById('progression');
var temps = setInterval(frame, 50);
function frame() {
if (width >= 100){
width = 0;
}
else{
width++;
progres.style.width = width + '%';
}
}
}
window.onload = progression;
Feel free to say if have to change some of my ways in the code to make it cleaner. And thanks for taking to help me :)
The main thing is that you have to call setInterval again after you click, in order to restart the interval. Calling clearInterval stops the interval from running.
Here's a way to clean this up a bit:
let counter = 0;
let intervalId;
const getNextImage = (direction) => {
const increment = direction === 'forward' ? 1 : -1;
counter += increment;
if (counter > images.length - 1) {
counter = 0;
}
if (counter < 0) {
counter = images.length - 1;
}
document.getElementById("currentImage").src = images[counter];
};
const startImageLoop = (direction) => {
width = 0;
clearInterval(intervalId);
getNextImage(direction);
intervalId = setInterval(() => {
getNextImage(direction);
}, 5000);
}
precedent.onClick = () => startImageLoop('backward');
suivant.onClick = () => startImageLoop('forward');
I'm building a quiz and now have the problem when going to the next question that my timer is doing weird.... it jumps for example from 4 to 9 and then to 3 but I want it to go to 10 again and just countdown to 0 and jump to the next question. Could someone explain me this? Or is it better to use SetInterval? It would be appreciated if you could help me out with this!
var currentQuestion = 0;
var currentCount = 0;
var maxCount = 3;
var totalScore = 0;
function displayQuestion() {
var question = allQuestions[currentQuestion].question;
var showQuestion = $(document).find(".question-full");
var showQuestionImage = $(document).find(".questions-img");
var questionImage = allQuestions[currentQuestion].questionImg;
var numAnswers = allQuestions[currentQuestion].responses.length;
var answerList = $(document).find(".answers-buttons");
/// SCORE
var scoreCounter = $(document).find(".scoreCounter");
$(showQuestion).text(question);
$(showQuestionImage).html(questionImage);
$(answerList).find("li").remove();
$(scoreCounter).find("span").remove();
$('.result-container').find("h2").remove();
$('.result-container').find("img").remove();
$('.result-container').find("a").remove();
$('<span>'+ totalScore +'</span>').appendTo(scoreCounter);
var answers;
var score;
for(var i = 0; i < numAnswers; i++) {
answers = allQuestions[currentQuestion].responses[i].text;
score = allQuestions[currentQuestion].responses[i].score;
$('<li><button class="nextButton" data-score="'+ score +'" type="button">'+answers+'</button></li>').appendTo(answerList);
}
nextQuestion();
$(".nextButton").on("click", function () {
var score = $(this).data('score');
IncreaseScore();
currentQuestion++;
totalScore += score;
if (currentQuestion < allQuestions.length) {
displayQuestion();
} else {
$('.after-container').fadeIn('slow');
$('.content').fadeOut('slow');
}
});
}
function nextQuestion() {
var tijd = 10;
var interval = setInterval(function() {
tijd--;
document.getElementById("countdowntimer").textContent = tijd;
if(tijd == 0) {
currentQuestion++;
displayQuestion();
console.log(tijd);
clearInterval(tijd);
}
}, 1000);
}
function IncreaseScore() {
currentCount++;
if (currentCount > maxCount) {
currentCount--;
}
}
Really close! Just your interval is not being cleared, as there is the wrong reference:
function nextQuestion() {
var tijd = 10;
var interval = setInterval(function() {
...
clearInterval(tijd);
...
}, 1000);
}
should be
function nextQuestion() {
var tijd = 10;
var interval = setInterval(function() {
...
clearInterval(interval);
...
}, 1000);
}
Your implementation is all fine, just you would have had all the intervals still running until 0 and updating #countdowntimer with whatever one fired last in the second.