每隔10秒用querySelector更改背景图像不起作用

Question

我尝试每10秒将div中的背景图像更改为随机图像（img / 1-10.jpg）。

背景仅更改一次，而不是每10秒更改一次，因为背景应该更改 ...我每10秒就会收到一次ALERT（因此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

使用JS生成随机数

<xsl:template match="tei:add[preceding-sibling::*[1][local-name()='p']]"/>

Answer 2

使用此：

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

代替PHP代码：

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