Восстановление interval-а по нажатию на кнопку

193
20 июня 2018, 10:20

Нужно чтобы при нажатии на кнопку "Return Interval" процедура продолжала действие. Что в коде неправильно?

let colors = ["green", "red", "blue", "black"]; 
let div = document.getElementsByTagName('div'); 
let buttons = document.querySelectorAll('button'); 
let x = -1; 
let y = 2000; 
 
let changeColors = setInterval(function() { 
    x += 1; 
    div[0].style.backgroundColor = colors[x]; 
    if (x === colors.length) { 
        x = -1; 
    } 
}, 2000) 
 
buttons[0].addEventListener('click', function() { 
    clearInterval(changeColors); 
    changeColors = null; 
}) 
 
buttons[1].addEventListener('click', function() { 
    if (changeColors === null) { 
        let changeColors = setInterval(function() { 
            x += 1; 
            div[0].style.gackgroundColor = colors[x]; 
            if (x === colors.length) { 
                x = -1; 
            } 
            buttons[0].addEventListener('click', function() { 
                clearInterval(changeColors)	 
            }); 
        }, 2000) 
    }; 
}) 
    
div { 
  width: 150px; 
  height: 150px; 
  border-radius: 50%; 
  background-color: red; 
}
<div></div> 
<button>Clear Interval</button> 
<button>Return Interval</button>

Answer 1

const colors = ["green", "red", "blue", "black"]; 
const div = document.getElementsByTagName('div'); 
const buttons = document.querySelectorAll('button'); 
let x = 0; 
const changeColor = () => { 
  div[0].style.backgroundColor = colors[x++]; 
  if(x === colors.length){ 
    x = 0; 
  } 
} 
 
let changeColors = setInterval(changeColor, 1000); 
 
buttons[0].addEventListener('click', function(){ 
  clearInterval(changeColors); 
  changeColors = null; 
}) 
 
buttons[1].addEventListener('click', function(){ 
  if(changeColors === null){ 
    changeColors = setInterval(changeColor, 1000); 
  }; 
})
div{ 
  width: 150px; 
  height: 150px; 
  border-radius: 50%; 
  background-color: red; 
}
<div></div> 
<button>Clear Interval</button> 
<button>Return Interval</button>

READ ALSO
Настройка роутера на Ангулар2+

Настройка роутера на Ангулар2+

Нужна помощь или совет в небольшой донастройке роутера на Angular2+Собственно, вот как все работает сейчас:

243
Как кликнуть на radio элемент с заданным текстом

Как кликнуть на radio элемент с заданным текстом

На странице есть radio элемент, на который я хочу кликнутьТаких элементов много, поэтому я хочу найти нужный и кликнуть на него

180
Меню на главной на всех других страницах прячется в &ldquo;Каталог&rdquo; при нажатии показывается!

Меню на главной на всех других страницах прячется в “Каталог” при нажатии показывается!

Затея такая: на главной странице есть менюшкаКогда перехожу на любую другую страницу эта менюшка скрыта в "Каталог" и когда я нажимаю на каталог...

272
Cкрыть часть текста

Cкрыть часть текста

Подскажите как можно скрыть часть текста с параграфами, вот так:

202