[英]Change image SRC when input slider changed
I'm have a slider that goes from 1 - 3, I'd like my image src to change depending on what the slider is set to.我有一个从 1 到 3 的滑块,我希望我的图像 src 根据滑块的设置而改变。 I've tried to do this using an else if statement but it doesn't seem to be changing?
我已经尝试使用 else if 语句来做到这一点,但它似乎没有改变?
HTML HTML
<span id="valBox"></span>
<input type="range" min="1" max="3" step="1">
<img id="demo" src="default-image.png">
Javascript Javascript
<script>
if (step === 1) {
document.querySelector("input.step").innerHTML.src = "one-image.png";
} else if (step === 2) {
document.querySelector("input.step").innerHTML.src = "two-image.png";
} else if (step === 3) {
document.querySelector("input.step").innerHTML.src = "three-image.png";
};
</script
You need to run your JavaScript in an onchange
event handler.您需要在
onchange
事件处理程序中运行您的 JavaScript。
const imageElement = document.getElementById("demo"); const selectorElement = document.getElementById("selector"); selectorElement.onchange = () => { const step = selectorElement.valueAsNumber; if (step === 1) { imageElement.src = "one-image.png"; } else if (step === 2) { imageElement.src = "two-image.png"; } else if (step === 3) { imageElement.src = "three-image.png"; } }
<span id="valBox"></span> <input id="selector" type="range" min="1" max="3" step="1"> <img id="demo" src="default-image.png">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.