Question

我不确定如何更改图像，基于滑块的输入，我似乎无法使if语句起作用。我已经从正在处理的网页中删除了该部分。在此示例中，我尝试在值等于60时更改图像。最终，我想从html中删除数字。

P.s我从链接上的w3school中获取了滑块。 https://www.w3schools.com/howto/howto_js_rangeslider.asp 我添加的唯一内容是If语句，这是唯一不起作用的内容。

感谢阅读。

[html]

<p>Select Fat Level</p>
    <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
        <p>Value: <span id="demo"></span></p>
    </div>

    <img src="images/bodytype/fat01muscle01.png" id="quiz-q1-current-bodytype-image">
</center>

[css]

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- 
(Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

[js]

var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; // Display the default slider value

    // Update the current slider value (each time you drag the slider handle)

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

    if (output.value==60) {
        alert("hi")
        document.getElementById("quiz-q1-current-bodytype-image").src("images/bodytype/fat02muscle01.png");
    }

Answer 1

基于该代码，仅在初始页面加载时调用if语句。尝试将其移入事件处理程序并检查滑块值，而不是输出值：

slider.oninput = function() {
  output.innerHTML = this.value;
  if(this.value == 60){
  alert("hi")
  document.getElementById("quiz-q1-current-bodytype-image").src("images/bodytype/fat02muscle01.png");
  }
}

Answer 2

请尝试这个。

如果您console.log output.value将未定义。因此您需要使用this.value获取range的值。另外，您需要根据https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

将此代码.src("images/bodytype/fat02muscle01.png");更改为此.src="images/bodytype/fat02muscle01.png";

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)

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

    if (this.value==60) {
    alert("hi")
    document.getElementById("quiz-q1-current-bodytype-image").src="http://pngriver.com/wp-content/uploads/2018/04/Download-Free-Free-Download-PNG.png";
}
}

滑块输入值以更改图像

2 个答案: