слайдер javascript, показывающий разные изображения для каждого значения

Question

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

, поэтому, если для ползунка установлено значение 1, отображается image1.jpg, значение 2 будет отображать image2.jpg и т. Д.

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

Но я не знаю, как обновить изображения, так как сейчас код просто печатает новый со стороны старых изображений. я ++

Кто-нибудь знает, как обновить изображение, вместо того, чтобы каждый раз печатать новое?

Любая помощь будет оценена!

var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;

  var x = document.createElement("IMG");
  x.setAttribute("src", "image" + this.value + ".jpg");
  document.body.appendChild(x);
}

<div class="slidecontainer">
  <input type="range" min="1" max="2" value="1" class="slider" id="myRange">
  <p>Value: <span id="value"></span></p>
</div>

Answer 1

Вы можете просто использовать элемент img с изображением по умолчанию или src значение :

var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;

  var img = document.getElementById("img");
  img.setAttribute("src", "https://loremflickr.com/320/240/" + this.value);
}

<div class="slidecontainer">
  <input type="range" min="1" max="5" value="1" class="slider" id="myRange">
  <p>Value: <span id="value"></span></p>
  <img src="https://loremflickr.com/320/240/1" alt="" id="img">
</div>