Div creation and styling not working as expected - javascript

I'm trying to create a number of divs and iterate through them on click.
The iteration only works on every other click.
Strangely, I'm getting no errors.
I tried moving the divs variable declaration outside of the for loop.
for (let i = 0; i <= 5; i++) {
let div = document.body.insertAdjacentHTML('beforeend', `<div class="div">${i}</div>`)
let divs = document.getElementsByClassName('div');
divs[i].style.backgroundColor = randomColor();
divs[i].onclick = () => {
close(divs[i])
open(divs[i + 1])
}
}
function randomColor() {
let e = Math.floor(Math.random() * 16777215).toString(16);
return `#${e}`;
}
function close(t) {
t.style.transform = 'scale(0.5)'
t.style.opacity = '0'
setTimeout(function() {
t.style.display = 'none'
}, 500)
}
function open(t) {
t.style.display = 'block'
setTimeout(function() {
t.style.transform = 'scale(1)'
t.style.opacity = '1'
}, 5)
}
div {
height: 100%;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 0;
transition: 0.5s;
opacity: 0;
transform: scale(0.5);
}

you need to
open(divs[(i + 1) % 6]) so it loop correctly
hide all divs at initial (except one)
there still some minor issue with the initial state (need to add opacity and transform, I leave it for simplicity), I think you should use proper class instead of inline css to make it easier.
for (let i = 0; i <= 5; i++) {
let div = document.body.insertAdjacentHTML('beforeend',
`<div class="div" style="display:${i==0?'block':'none'}">${i}</div>`
)
}
let divs = document.getElementsByClassName('div');
for (let i = 0; i <= 5; i++) {
divs[i].style.backgroundColor = randomColor();
divs[i].onclick = () => {
close(divs[i])
open(divs[(i + 1) % 6])
}
}
function randomColor() {
let e = Math.floor(Math.random() * 16777215).toString(16);
return `#${e}`;
}
function close(t) {
t.style.transform = 'scale(0.5)'
t.style.opacity = '0'
setTimeout(function() {
t.style.display = 'none'
}, 500)
}
function open(t) {
t.style.display = 'block'
setTimeout(function() {
t.style.transform = 'scale(1)'
t.style.opacity = '1'
}, 5)
}
div {
height: 100%;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 0;
transition: 0.5s;
opacity: 0;
transform: scale(0.5);
}

Related

Why animation don't complete its path when duration is decreased by JavaScript

I have a animation whose duration decreases each time black jumps(using space) over the red, it works fine that subsequent jumps reduces the duration.
But after a certain decrease in time, say after reducing to 4s,3.9s,3.8s..., the animation don't start from the right-most end which is supposed to be. As it is decided path(110vw) in #keyframes animateVillan
Is there something I am doing wrong, first thought it is a glitch kind and decided to change duration only when red reaches less than 10 and tried below part
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1 + "s";
}
But this didn't solve the problem and path is not completely traced by the red
Sorry have to jump a little, 4 or 5 jumps only to see the error plz
let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
if (e.code === "ArrowRight") {
valueXCoordinate = ourHeroFigXValue + 100;
} else if (e.code === "KeyA" || e.code === "ArrowLeft") {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100;
} else {
valueXCoordinate = 0;
}
} else if (e.code === "Space") {
ourHeroFig.classList.add("animateHero");
setTimeout(function() {
ourHeroFig.classList.remove("animateHero");
}, 700)
}
changePosition();
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ""
setInterval(
function() {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
let ourVillanFigXValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('left'));
let ourVillanFigYValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('bottom'));
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue);
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue);
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.3 + "s";
}
if (gameOverValueX < ourVillanFig.offsetWidth && gameOverValueY < ourVillanFig.offsetHeight) {
console.log("yes touched");
ourVillanFig.classList.remove("animateVillan");
obstacleBarCrossed = false;
} else if (obstacleBarCrossed && gameOverValueX < ourVillanFig.offsetWidth) {
ourVillanAnimeDuration = parseFloat(getComputedStyle(ourVillanFig).getPropertyValue('animation-duration'));
console.log(ourVillanFigXValue < 0, ourVillanAnimeDuration)
if (ourVillanAnimeDuration <= 2) {
ourVillanAnimeDuration = 2
}
}
// console.log(gameOverValueX,gameOverValueY)
}, 10);
#ourHero {
width: 20px;
height: 180px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 180px;
background-color: red;
position: fixed;
bottom: 0;
left: 50vw;
}
.animateVillan {
animation: animateVillan 5s linear infinite;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>
Thanks for help in advance
First make the red thing starts from far right so change left: 50vw; to something like left: 110vw;. Also, instead of the infinite animation, just remove the animateVillan class after the red gets out of screen then re-add it again. Can be done by using an animationend event handler:
ourVillanFig.addEventListener('animationend', () => {
ourVillanFig.classList.remove('animateVillan')
ourVillanFig.clientHeight // just to cause a reflow
ourVillanFig.classList.add('animateVillan')
})
or maybe by checking its x position and see when it gets out.
Here is the result. It seems that it is working just fine without any glitches:
EDIT: To make the red stops where it is when it touches black, you can make the following css class:
.pauseVillan {
animation-play-state: paused;
}
and then when the red gets in touch just add the pauseVillan class to it:
ourVillanFig.classList.add('pauseVillan')
Here is the updated snippet:
let ourHeroFig = document.getElementById('ourHero')
let ourVillanFig = document.getElementById('obstacleBar')
let gameScoreDigits = document.getElementById('gameScoreDigits')
let valueXCoordinate = ''
let obstacleBarCrossed = true
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('left')
)
let ourHeroFigYValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('bottom')
)
if (e.code === 'ArrowRight') {
valueXCoordinate = ourHeroFigXValue + 100
} else if (e.code === 'KeyA' || e.code === 'ArrowLeft') {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100
} else {
valueXCoordinate = 0
}
} else if (e.code === 'Space') {
ourHeroFig.classList.add('animateHero')
setTimeout(function() {
ourHeroFig.classList.remove('animateHero')
}, 700)
}
changePosition()
})
ourVillanFig.addEventListener('animationend', () => {
ourVillanFig.classList.remove('animateVillan')
ourVillanFig.clientHeight // just to cause a reflow
ourVillanFig.classList.add('animateVillan')
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ''
setInterval(function() {
let ourHeroFigXValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('left')
)
let ourHeroFigYValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('bottom')
)
let ourVillanFigXValue = parseInt(
getComputedStyle(ourVillanFig).getPropertyValue('left')
)
let ourVillanFigYValue = parseInt(
getComputedStyle(ourVillanFig).getPropertyValue('bottom')
)
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue)
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue)
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration =
ourVillanAnimeDuration - 0.3 + 's'
}
if (
gameOverValueX < ourVillanFig.offsetWidth &&
gameOverValueY < ourVillanFig.offsetHeight
) {
console.log('yes touched')
ourVillanFig.classList.add('pauseVillan')
obstacleBarCrossed = false
} else if (
obstacleBarCrossed &&
gameOverValueX < ourVillanFig.offsetWidth
) {
ourVillanAnimeDuration = parseFloat(
getComputedStyle(ourVillanFig).getPropertyValue('animation-duration')
)
console.log(ourVillanFigXValue < 0, ourVillanAnimeDuration)
if (ourVillanAnimeDuration <= 2) {
ourVillanAnimeDuration = 2
}
}
// console.log(gameOverValueX,gameOverValueY)
}, 10)
#ourHero {
width: 20px;
height: 180px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 180px;
background-color: red;
position: fixed;
bottom: 0;
left: 110vw;
}
.animateVillan {
animation: animateVillan 4s linear;
}
.pauseVillan {
animation-play-state: paused;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

How to add animation to photos changing every 3 seconds?

The pictures change themselves every 3 seconds.
I would like to add simple animation to the photo during the change.
Preferably in vaniilla js.
let index = 1;
const changeImg = () => {
index++;
img.setAttribute('src', `img/img${index}.png`);
if (index === 3) {
index = 0;
}
};
setInterval(changeImg, 3000);
If you use something like animate.css, or create your own animation class you could do it like this:
(Im assuming you're getting the image by a query selector/getElementById)
let index = 1;
const changeImg = () => {
index++;
img.classList.add('animate__animated');
img.classList.add('animate__bounce');
setTimeout(() => {
img.setAttribute('src', `img/img${index}.png`);
img.classList.remove('animate__animated');
img.classList.remove('animate__bounce');
}, 300); // This delay is assuming the animation duration is 300ms, you need to change this to the length of the animation
if (index === 3) {
index = 0;
}
};
setInterval(changeImg, 3000);
As you suggested an example in vanilla JavaScript (no libraries), here you go.
(function slideShow() {
let imgs = [
"https://picsum.photos/id/237/200/300",
"https://picsum.photos/id/238/200/300",
"https://picsum.photos/id/239/200/300"
];
let index = 0;
const frontImg = document.getElementById("slideshow__img--front");
const backImg = document.getElementById("slideshow__img--back");
frontImg.src = imgs[index];
const changeSlideShowImg = () => {
const currImgSrc = imgs[index];
index++;
if (index >= imgs.length) index = 0;
const newImgSrc = imgs[index];
backImg.src = newImgSrc;
frontImg.classList.add("slideshow__img--fadeout");
setTimeout(() => {
frontImg.src = newImgSrc;
frontImg.classList.remove("slideshow__img--fadeout");
}, 500);
};
setInterval(changeSlideShowImg, 3000);
})()
.slideshow {
width: 200px;
height: 300px;
position: relative;
}
.slideshow__img {
position: absolute;
left: 0;
top: 0;
opacity: 1;
}
#slideshow__img--front {
z-index: 2;
}
.slideshow__img.slideshow__img--fadeout {
transition: opacity 0.5s ease-in;
opacity: 0;
}
<div class="slideshow">
<img id="slideshow__img--front" class="slideshow__img" />
<img id="slideshow__img--back" class="slideshow__img" />
</div>

How to stop setInterval in loop

I trying to do equalizer animation. I did function for start animation, but i cant do function for stop animation, becouse clearInterval not working.
my codepen
https://codepen.io/naraxiss/pen/qyMamy
var spans = document.querySelectorAll('span');
function getRandom() {
return Math.random();
}
function scale(el){
el.style.transform = 'scaleY(' + getRandom() +')';
}
var myInterval = null;
function startMusic (spans){
var el = spans;
for(var i = 0; i < el.length; i++){
(function(i) {
myInterval = setInterval(function(){
scale(el[i]);
}, 100);
})(i);
}
}
function stopMusic (interval,els){
clearInterval(interval);
//console.log(els)
for(var i = 0; i < els.length; i++){
els[i].style.stransform = 'scaleY(0.05)'
}
}
document.querySelector('.start').addEventListener('click', function(){
startMusic(spans);
})
document.querySelector('.finish').addEventListener('click', function(){
stopMusic(myInterval,spans);
})
body{
margin: 0;
}
span{
display: inline-block;
width: 50px;
height: 300px;
background-color: #000;
margin-right: 10px;
transition: 0.1s linear;
transform: scaleY(0.005);
transform-origin: bottom;
}
.equalizer{
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%,-50%);
}
<div class="equalizer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<button class="start">START</button>
<button class="finish">FINISH</button>
Thanks!
You need to save reference of each interval in an array like this
var myInterval = [];
function startMusic (spans){
var el = spans;
for(var i = 0; i < el.length; i++){
(function(i) {
let interval = setInterval(function(){
scale(el[i]);
}, 100);
myInterval.push(interval);
})(i);
}
}
and then in stopMusic function clear all of those intervals like this one.
function stopMusic (interval,els){
interval.forEach(inter => clearInterval(inter));
console.log(els)
for(var i = 0; i < els.length; i++){
els[i].style.stransform = 'scaleY(0.05)'
}
}
Because you create 5 intervals inside your for loop you need to stop them seperately.
var spans = document.querySelectorAll('span');
function getRandom() {
return Math.random();
}
function scale(el) {
el.style.transform = 'scaleY(' + getRandom() + ')';
}
var myInterval = []; // <------------------------ Make it an array
function startMusic(spans) {
var el = spans;
for (var i = 0; i < el.length; i++) {
(function(i) {
myInterval.push(setInterval(function() { // <------------- push every item
scale(el[i]);
}, 100));
console.log(myInterval)
})(i);
}
}
function stopMusic(els) {
for (var x = 0; x < myInterval.length; x++) {
clearInterval(myInterval[x]); // <--------------------- Access every item to clear
}
console.log(els)
for (var i = 0; i < els.length; i++) {
els[i].style.stransform = 'scaleY(0.05)'
}
}
The reason it doesn't work is because you start 5 intervals but only stop 1. Put the intervals in a array so you can loop them and stop them all. See change below.
var spans = document.querySelectorAll('span');
function getRandom() {
return Math.random();
}
function scale(el){
el.style.transform = 'scaleY(' + getRandom() +')';
}
var myIntervals = [];
function startMusic (spans){
var el = spans;
for(var i = 0; i < el.length; i++){
(function(i) {
myIntervals[i] = setInterval(function(){
scale(el[i]);
}, 100);
})(i);
}
}
function stopMusic (intervals,els){
//clearInterval(interval);
//console.log(els)
for(var i = 0; i < els.length; i++){
clearInterval(intervals[i]);
els[i].style.stransform = 'scaleY(0.05)'
}
}
document.querySelector('.start').addEventListener('click', function(){
startMusic(spans);
})
document.querySelector('.finish').addEventListener('click', function(){
stopMusic(myIntervals,spans);
})
body{
margin: 0;
}
span{
display: inline-block;
width: 50px;
height: 300px;
background-color: #000;
margin-right: 10px;
transition: 0.1s linear;
transform: scaleY(0.005);
transform-origin: bottom;
}
.equalizer{
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%,-50%);
}
<div class="equalizer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<button class="start">START</button>
<button class="finish">FINISH</button>

Customizing loading animation using pure javascript

I'm making a plugin for loading animation. Here is my example:
let loading = document.getElementsByClassName('loading')[0];
let width = +loading.style.width.split('px')[0], x = width / 50;
let O = {};
for (let i = 0; i <= 50; i++) {
O[i] = {
left: `0`,
width: `${i * x}px`
}
}
for (let i = 50, m = 1; i > 0; i-- , m++) {
O[m + 50] = {
left: `${m * x}px`,
width: `${(i - 1) * x}px`
}
}
let style = document.createElement('style');
let css = '';
for (let o in O) {
let c = O[o];
css += `${o}% { margin-left: ${c.left}; width: ${c.width} }`;
}
style.innerHTML = `#keyframes loading{ ${css} }`;
document.head.appendChild(style);
loading.style.animation = 'loading 2s infinite';
.container {
width: 200px;
height: 3px;
background-color: rgba(0,0,0,.12);
}
.loading {
height: 3px;
background-color: #f00;
}
<div class="container">
<div class="loading" style="width: 200px;"></div>
</div>
It's working. I want to upgrade this plugin by expanding the container width and keeping the loading width (still 200px).
let loading = document.getElementsByClassName('loading')[0];
let width = +loading.style.width.split('px')[0], x = width / 50;
let O = {};
for (let i = 0; i <= 50; i++) {
O[i] = {
left: `0`,
width: `${i * x}px`
}
}
for (let i = 50, m = 1; i > 0; i--, m++) {
O[m + 50] = {
left: `${m * x}px`,
width: `${(i - 1) * x}px`
}
}
let style = document.createElement('style');
let css = '';
for (let o in O) {
let c = O[o];
css += `${o}% { margin-left: ${c.left}; width: ${c.width} }`;
}
style.innerHTML = `#keyframes loading{ ${css} }`;
document.head.appendChild(style);
loading.style.animation = 'loading 2s infinite';
.container {
width: 300px;
height: 3px;
background-color: rgba(0,0,0,.12);
}
.loading {
height: 3px;
background-color: #f00;
}
<div class="container">
<div class="loading" style="width: 200px;"></div>
</div>
How to let it run to the end of the container?
My default example is easier because the loading width equals to the container width. So, spliting the width to multiple block (mini-widths) by width / 50 (twice).
Now, if the container width is 300, and the loading width is still 200. How to split it?
Thank you!
My idea: Split the container width to 3 parts:
50%
|----------|-----|-----|----------|
{ loading1 }{ 1 }{ 2 }{ loading2 }
The m variable is enabled and increased after getting full the loading width (1).
Inside the part 2, if m * z + loading_width < max_left (the loading2 is larger than the loading width (200 by default)), keep the width. Otherwise, decreased the width.
Also, because the second loop doesn't stop at 100%, I have added that field to the css alone:
100% { margin-left: 0; width: 0; }
let container = document.getElementsByClassName('container')[0];
let loading = document.getElementsByClassName('loading')[0];
let container_width = +container.style.width.split('px')[0];
let loading_width = +loading.style.width.split('px')[0];
let max_left = container_width - (container_width - loading_width);
let z = container_width / 50;
let O = {};
let m = 1;
for (let i = 0; i <= 50; i++) {
if (i * z <= loading_width) {
O[i] = {
left: `0`,
width: `${i * z}px`
}
} else {
O[i] = {
left: `${m++ * z}px`,
width: `${loading_width}px`
}
}
}
for (let i = 50, k = 51, n = 1; i > 0; i-- , k++ , n++) {
if (m * z + loading_width <= max_left) {
O[n + 50] = {
left: `${m++ * z}px`,
width: `${loading_width}px`
}
} else {
O[n + 50] = {
left: `${m * z}px`,
width: `${container_width - (m * z)}px`
}
if (!(container_width - m * z)) {
break;
}
m++
}
}
let style = document.createElement('style');
let css = '';
for (let o in O) {
let c = O[o];
css += `${o}% { margin-left: ${c.left}; width: ${c.width} }`;
}
style.innerHTML = `#keyframes loading{ ${css} 100% { margin-left: 0; width: 0; } }`;
document.head.appendChild(style);
loading.style.animation = 'loading 2s infinite';
.container {
height: 3px;
background-color: rgba(0,0,0,.12);
}
.loading {
height: 3px;
background-color: #f00;
}
<div class="container" style="width: 300px;">
<div class="loading" style="width: 200px;"></div>
</div>

When clicked on a button that handles event more than one time setInterval goes crazy?

When I click in the automatic button (auto) more than once, which handles the setInterval method, the color Divs go crazy fast, now the reason is what I'm here for to know. This is the DEMO in jsfiddleDEMO OF COLOR DIVS WITH SETINTERVAL METHOD
Body:
<div id="placeDiv1">ok</div>
<button id="b1" onclick="forward()">Forward</button>
<button id="b2" onclick="backward()">Backward</button>
<button id="b3" onclick="skip2()">skip2</button>
<button id="b4" onclick="automatic()">auto</button>
<button id="b5" onclick="stop()">stop</button>
<script>
var myArray = ["black", "yellow", "green", "red", "blue", "blue", "black", "gray"];
var myArray1 = ["yellow", "blue", "green", "red", "green", "blue", "black", "gray"];
var i = 0;
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
forward = function () {
if (i == myArray.length - 1) {
i = 0;
} else {
i = i + 1;
}
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
};
skip2 = function () {
if (i == myArray.length - 4) {
i += 2;
alert("This is the iterator " + i)
} else if (i == 7) {
i = 0
} else {
i = i + 1;
};
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
};
backward = function () {
if (i == 0) {
i = myArray.length - 1;
i = myArray1.length - 1;
} else {
i = i - 1;
}
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
//
}
automatic = function () {
var m = setInterval(function () {
if (i == myArray.length - 1) {
i = 0;
} else {
i = i + 1;
}
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
}, 100);
stop = function () {
clearInterval(m)
};
};
</script>
CSS:
#placeDiv {
position: absolute;
left: 0px;
width: 100px;
height: 100px;
}
#placeDiv1 {
position: absolute;
left: 100px;
width: 100px;
height: 100px;
}
#b1 {
position: absolute;
top: 100px;
left: 0px
}
#b2 {
position: absolute;
top: 100px;
left: 80px
}
#b3 {
position: absolute;
top: 100px;
left: 170px
}
#b4 {
position: absolute;
top: 100px;
left: 270px
}
#b5 {
position: absolute;
top: 100px;
left: 320px
}
Just update the script like
var m=null;
automatic=function(){
clearInterval(m);
m = setInterval(function(){
if(i == myArray.length-1)
{i=0;}
else
{i=i+1;}
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
},100);
stop=function(){
clearInterval(m);
};
Check Fiddle
You need to Kill the setinterval when you call the function automatic and also need to define var m outside the function
I'm finding your code a bit confusing, but the way i see it, you are setting the interval multiple times. Each time you click the button, it creates another timer.
What you can do is set a variable to check if the timer is running, like so:
var running = false;
In your automatic() function, set running to true; and in stop(), set running to false.
Also in automatic(), only create the timer if it's not already running.
All together, we now have:
running = false;
automatic=function(){
if (!running) {
running = true;
var m = setInterval(function(){if(i == myArray.length-1)
{i=0;}
else
{i=i+1;}
document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
document.getElementById("placeDiv").style.backgroundColor = myArray[i];},100);
}
stop=function(){
clearInterval(m);
running = false};
Is it just me, or are you not closing the function properly as well?

Categories

Resources