We Keep Coding

Automatically Change Individual Table Data Using Javascript

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>

How to display block and none all background images stacked with absolute with JS?

I am creating an array with 16 divs dynamically on load. I have stacked all the divs with position absolute with CSS. Now, I would like to display block and display none with a set time interval and repeat this over and over again if beginning and end is reached a loop.
This is my code:
if (window.innerWidth < 767) {
images.forEach((image, index) => {
let imageDiv = document.createElement('div');
imageDiv.className = `bg-image bg-image-bg${image}`;
hero.appendChild(imageDiv);
console.log(index);
console.log(imageDiv);
});
}
it generates 16 divs with a class bg-image. Now, I would like to display block and display none from 1 to 16 loop it over and over again.
This is what I would like to achieve: https://codepen.io/thomasvaeth/pen/JrjyjW (But without the hover effect).
How can I do this?
Thanks.

At img div creation you push them in an array, then you call the same function every 500ms (in my eg) thah hides all the img and display incrementally the right one :
let imgArr = [];
if (window.innerWidth < 767) {
images.forEach((image, index) => {
let imageDiv = document.createElement('div');
imageDiv.className = `bg-image bg-image-bg${image}`;
hero.appendChild(imageDiv);
console.log(index);
console.log(imageDiv);
imgArr.push(imageDiv);
});
}
let counter = 0;
function roll() {
imgArr.map( img => img.style.display = 'none' );
imgArr[counter].style.display = 'block';
counter++;
if(counter == imgArr.length - 1) counter = 0;
setTimeout(()=>roll(), 500);
}
setTimeout(() => roll(), 0);
or :
let counter = 0;
function roll() {
imgArr.map( img => img.style.display = 'none' );
imgArr[counter].style.display = 'block';
counter++;
if(counter == imgArr.length - 1) counter = 0;
}
setInterval(() => roll(), 500);
EDIT (asked)
How would i stop function roll if screen is greater then 1200 ?
so in that case you should use the setInterval() function :
function roll() {
imgArr.map( img => img.style.display = 'none' );
imgArr[counter].style.display = 'block';
counter++;
if(counter == imgArr.length - 1) counter = 0;
}
let interv = setInterval(() => roll(), 500);
window.onresize = () => {
let windowWidth = window.innerWidth||d.documentElement.clientWidth||d.getElementsByTagName('body')[0].clientWidth;
clearInterval(interv);
if(windowWidth < 1200) {
interv = setInterval(() => roll(), 500);
} else {
clearInterval(interv);
}
}

How can I reset my SetInterval when going to next question?

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.

Basic Javascript Countdown

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);

Stop Looping Text but still run the effect

Example
var text = 'ENTER...';
var chars = text.split('');
var enter = document.getElementById("enter")
var i = 0;
setInterval (function(){
if (i < chars.length){
enter.innerHTML += chars[i++];
}else{
i = 0;
enter.innerHTML = "";
}
}, 200);
I'm trying to have this typing "enter" effect and I am wondering how to make it only go once. So it will type out "ENTER..." and then stop.
Example

var text = 'ENTER...';
var enter = document.getElementById("enter")
var i = 0;
(function nextLetter() {
enter.innerHTML = text.substr(0, ++i);
if (i < text.length) {
setTimeout(nextLetter, 200);
}
})();
edit: you either have to use setTimeout (one time "sleep"), or remember return value of setInterval and destroy that timer by clearInterval after you don't need it/want it running.

If you use interval, you have to stop the it with clearInterval. Stop it inside the interval function, which is declared as a variable, in the if-statement:
var text = 'ENTER...';
var enter = document.getElementById("enter")
var i = 0;
var interval = setInterval(function() {
enter.innerHTML += text[i];
i += 1;
if(i === text.length) {
clearInterval(interval);
}
}, 200);
JSFiddle

var text = 'ENTER...';
var chars = text.split('');
var enter = document.getElementById("enter")
var i = 0;
var interval = setInterval (function(){
if(i == chars.length) {
clearInterval(interval);
return;
}
if (i < chars.length){
enter.innerHTML += chars[i++];
}else{
i = 0;
enter.innerHTML = "";
}
}, 200);
<div id="enter"></div>