Random Img with start button

I have a simple code here showing some random images every time it is refreshed & 2 buttons mainly Display Random Image & Stop. How can I set a timer of 2 seconds every time a user clicks on the Display Random Image & stop the recurrence when stop is click?

var imageUrls = [
  "https://cdn.pixabay.com/photo/2020/11/18/19/41/cathedral-5756535_640.jpg",
  "https://cdn.pixabay.com/photo/2018/05/28/18/35/sahara-3436700_960_720.jpg",
  "https://cdn.pixabay.com/photo/2020/10/14/22/32/buildings-5655593_640.jpg",
  "https://cdn.pixabay.com/photo/2020/07/20/12/08/social-distancing-5422795_640.jpg",
  "https://cdn.pixabay.com/photo/2020/11/22/16/58/road-5767221_640.jpg",
  "https://cdn.pixabay.com/photo/2016/09/10/02/20/photography-1658471_640.jpg"
];

function getImageHtmlCode() {
  var dataIndex = Math.floor(Math.random() * imageUrls.length);
  var img = '<a href="' + '"><img src="';
  img += imageUrls[dataIndex];
  img += '" alt="Image Error"/></a>';
  return img;
}

var start = false;
var numChange;

function startButton() {
  if (document.getElementById("go")) {
    numChange = setInterval(getImageHtmlCode, 1000);
  }
}

function stopButton() {
  if (start == true) {
    start = false;
  }
}

document.write(getImageHtmlCode());

<input type="button" id="go" onclick="startButton()" value="Display Random Image">
<button onclick="stopButton()">Stop</button><br/>

Answer

Have a look at this

• It is not recommended to use document.write

• You do not need a start boolean when you can set and clear the interval

• I just change the source of the image to avoid manipulating the DOM after initialising the image

var imageUrls = [
  "https://cdn.pixabay.com/photo/2020/11/18/19/41/cathedral-5756535_640.jpg",
  "https://cdn.pixabay.com/photo/2018/05/28/18/35/sahara-3436700_960_720.jpg",
  "https://cdn.pixabay.com/photo/2020/10/14/22/32/buildings-5655593_640.jpg",
  "https://cdn.pixabay.com/photo/2020/07/20/12/08/social-distancing-5422795_640.jpg",
  "https://cdn.pixabay.com/photo/2020/11/22/16/58/road-5767221_640.jpg",
  "https://cdn.pixabay.com/photo/2016/09/10/02/20/photography-1658471_640.jpg"
];

function getImage() {
  var dataIndex = Math.floor(Math.random() * imageUrls.length);
  return imageUrls[dataIndex];
}

var numChange;

function startButton() {
  clearInterval(numChange); // just make sure it is cleared before setting it again
  numChange = setInterval(show, 1000);
}

function stopButton() {
  clearInterval(numChange)
}

function show() {
  document.getElementById("image").src = getImage()
}

window.addEventListener("load", function() { // when page loads
  document.getElementById("imageDiv").innerHTML = '<a href=""><img id="image" src="' + getImage() + '" alt="Image Error"/></a>'
  document.getElementById("go").addEventListener("click", startButton);
  document.getElementById("stop").addEventListener("click", stopButton);
})

<button type="button" id="go">Display Random Image</button>
<button type="button" id="stop">Stop</button><br/>
<div id="imageDiv"></div>