Менять фоновое изображение с помощью querySelector каждые 10 секунд не работает

Question

Я пытаюсь изменить фоновое изображение в div каждые 10 секунд на случайное изображение (img / 1-10.jpg).

Фон меняется только один раз, а не каждые 10 секунд, как это должно измениться... Я получаю ALERT каждые 10 секунд (поэтому setInterval работает).

function update() {    
  window.setInterval(function() {
    alert('ok');
    document.querySelector("#ri-grid div:nth-child(1)")
      .style
      .backgroundImage = "url(img/<?php echo rand(1,10);?>.jpg)";
  }, 10000); 
}

update();

.grid--layout-1 .grid__item:nth-child(1) {
  background-image: url(img/1.jpg);  
  transition: background 5s linear; 
}

<div class="grid grid--layout-1 grid--current" id="ri-grid">
  <div class="grid__item 0"></div>
  <div class="grid__item 1"></div>
  <div class="grid__item 2"></div>
  <div class="grid__item 3"></div>
</div>

Answer 1

Используйте это:

Math.floor(Math.random() * 10) + 1

вместо кода PHP:

<?php echo rand(1,10);?>

Answer 2

Генерация случайного числа с помощью JS

<script type="text/javascript">
        function update() {    
        window.setInterval(function() {
        var index = Math.floor(Math.random() * 10) + 1; // Generates random number from 1 to 10
        document.querySelector("#ri-grid div:nth-child(1)").style.backgroundImage = "url(img/" + index + ".jpg)";
        }, 10000); 
        }

        update();  
</script>