[英]Change image SRC when input slider changed
我有一个从 1 到 3 的滑块,我希望我的图像 src 根据滑块的设置而改变。 我已经尝试使用 else if 语句来做到这一点,但它似乎没有改变?
HTML
<span id="valBox"></span>
<input type="range" min="1" max="3" step="1">
<img id="demo" src="default-image.png">
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
您需要在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.