Как добавить условие?

[LADYX]

Здравствуйте. Есть скрипт:

onload = function ()
    {
    var grounds = ['одна картинка', 'вторая картинка',
                   'третья картинка'];
    var t = 3;
    var img = document.createElement('active');
 
    setInterval (function ()
       {
       var p = grounds.shift ();
       document.body.appendChild(img).style.backgroundImage = 'url(' + p + ')';
       grounds.push (p);
       }, t * 1000);
}

Этот скрипт запускается сразу. Но как написать условие, чтобы он запускался только в том случае, если на странице есть блок с классом .active ?

Это ненужно, просто проясню картину: Класс .active у меня добавляется другим скриптом при помощи кнопки методом toggle. Я нажал кнопку, у меня к нужному элементу добавился класс .active. И вот как этот класс появился, и нужно чтобы сработал мною приведенный скрипт. Но если при повторном нажатии на кнопку я удалил класс .active, мне нужно чтобы приведенный скрипт перестал работать. Вот как это сделать? Спасибо.

[Nexus]

Посмотрите эту тему:
https://javascript.ru/forum/jquery/7...ntervalov.html

Решение вашей задачи может быть схоже с решением из темы, ссылку на которую я указал выше.

[LADYX]

Nexus,

Решение вашей задачи может быть схоже с решением из темы, ссылку на которую я указал выше.

нет, там же совершенно другая задача

[voraa]

var img = document.createElement('active');

Вы создаете HTML элемент с тегом active?

Навести на кнопку слушатель события. Если добавляется класс, тогда и запускайте скрипт.

[рони]

если на странице есть блок с классом .active ?

что мешает проверить наличие блока в строке 9 и сделать return если блока нет.

[рони]

LADYX,

setInterval (function (){
if(!document.querySelector('.active')) return;
//...

[Nexus]

нет, там же совершенно другая задача

Вы не правы.

[LADYX]

рони,

setInterval (function (){
if(!document.querySelector('.active')) return;
//...

Да, спасибо, это то что нужно.

Но теперь другой момент. Я не могу понять, почему картинка не меняется в этом блоке (.active), а создается блок в консоле такого типа:

<div__active style="background-image: url(&quot;ПУТЬ_К_КАРТИНКЕ&quot;);"></div__active>

И в нем происходит смена картинок. Что это такое, и почему так?

[рони]

LADYX,
ваш код и вопросы для телепатов, не могу помочь, информации недостаточно.

[LADYX]

[JS]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    $('.button').click(function(){
        $('.div').toggleClass('active');
    });

onload = function ()
    {
    var grounds = ['http://www.masini.ro/imagini/galerie/8863/ferrari-599-gtb-fiorano-coupe-2010/ferrari-599-gtb-fiorano-coupe-2010_0_large.jpeg',
                           'https://i.pinimg.com/736x/ad/57/de/ad57de484686d3ea4dd42f4963608f09--ferrari-scuderia-ferrari-f.jpg',
                           'https://www.torquenews.com/sites/default/files/image-1/%5Btitle-raw%5D/maserati_granturismo.jpg'];
    var t = 3;
    var img = document.createElement('active');
 
    setInterval (function (){
       if(!document.querySelector('.active')) return;
       {
       var p = grounds.shift ();
       document.body.appendChild(img).style.backgroundImage = 'url(' + p + ')';
       grounds.push (p);
       }, t * 1000);
}
[/JS]

[CSS]
.div,
.active {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50vh;
  background: url('http://www.masini.ro/imagini/galerie/8863/ferrari-599-gtb-fiorano-coupe-2010/ferrari-599-gtb-fiorano-coupe-2010_0_large.jpeg') center bottom no-repeat;
  background-size: cover;
}
[/CSS]

<button class="button">Кнопка</button>
<div class="div"></div>

рони,
такая у меня конструкция, вот о чем я говорил

ps. что-то я не могу понять, как мне здесь добавить код так, чтобы его можно было запустить, как это делаете вы