如何根据范围滑块更改图像？

Question

我正在复制此网页的https://www.modsy.com/project/furniture，但图像不会根据范围滑块进行更改。我的html代码是：

<div class="image mt-3 mb-3">
    <img src="../static/images/7.jpg" width="400" height="180">
    <img src="../static/images/8.jpg" width="400" height="180">
    <img src="../static/images/9.jpg" width="400" height="180">
</div>
<br>
<div class="rangeslider">
    <input type="range" min="1" max="3" value="3" class="myslider" id="sliderRange">
    <div class="row mt-3">
        <div class="col-4">
            <h6 class="display-6">Starting From Scratch</h6>
            <p id="demo"> I'm designing the room </p>
        </div>
        <div class="col-4">
            <h6 class="display-6">Somewhere in Between</h6>
            <p class="demo">I'm designing around a few pieces I already own</p>
        </div>
        <div class="col-4">
            <h6 class="display-6">Mostly Furnished</h6>
            <p class="demo">I want to put the finishing touches on my room</p>
        </div>
    </div>
</div>

我的JS代码：

<script> 
   var rangeslider = document.getElementById("sliderRange"); 
   var output = document.getElementById("demo"); 
   output.innerHTML = rangeslider.value; 
   rangeslider.oninput = function() { 
       output.innerHTML = this.value; 
  } 
</script> 

我的CSS代码：

<style> 

.rangeslider{ 
    width: 50%; 
} 

.myslider { 
    -webkit-appearance: none; 
    background: #FCF3CF  ; 
    width: 50%; 
    height: 20px; 
    opacity: 2; 
   } 


.myslider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    cursor: pointer; 
    background: #34495E  ; 
    width: 5%; 
    height: 20px; 
} 


.myslider:hover { 
    opacity: 1; 
} 

</style> 

错误是:未捕获值:无法读取null的属性‘TypeError’。您能说出我在代码中犯了什么错误吗

Answer 1

您应该使用load event或将脚本标签移到body标签的末尾。

我正在更改style属性，但最好的方法是使用类来使代码具有良好的伸缩性。

​

window.addEventListener('load', function() {

  var rangeslider = document.getElementById("sliderRange");

  var images = document.getElementById("sliderImages");

  rangeslider.addEventListener('input', function() {
    for (var i = 0; i < images.children.length; i++) {
      images.children[i].style.display = 'none';
    }
    i = Number(this.value) - 1;
    images.children[i].style.display = 'block';
  });

});

.rangeslider {
  width: 400px;
  margin: 0 auto;
}

.myslider {
  -webkit-appearance: none;
  background: #FCF3CF;
  width: 100%;
  height: 20px;
  opacity: 0.8;
  margin-top: 100px;
}

.myslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: #34495E;
  width: 33%;
  height: 20px;
}

.myslider:hover {
  opacity: 1;
}

.image {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.image>img {
  position: absolute;
  display: none;
}

.image>img.visible,
.image>img:first-child {
  display: block;
}

.sliderOutput>div {
  margin: 5px;
  width: 120px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.sliderOutput h6,
.sliderOutput p {
  margin: 5px;
}

<div class="image mt-3 mb-3" id="sliderImages">
  <img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
  <img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
  <img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
  <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
  <div class="sliderOutput row mt-3">
    <div class="col-4">
      <h6 class="display-6">Starting From Scratch</h6>
      <p class="demo"> I'm designing the room </p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Somewhere in Between</h6>
      <p class="demo">I'm designing around a few pieces I already own</p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Mostly Furnished</h6>
      <p class="demo">I want to put the finishing touches on my room</p>
    </div>
  </div>
  </p>
</div>

​

Answer 2

您的JS代码运行得太早。DOM未就绪。

将脚本标记移到页面的末尾会有所帮助(就像上面提到的@RyanSpark)。