在滑块上选择某个值时播放声音

Question

我想做一个简单的滑动条，当选择一个特定的值(在这个例子中是76)，按钮说"Continue"播放特定的声音，而不是重定向，但我似乎不能让它工作，你们能帮我解决这个问题吗?下面是代码片段:

<div id="Slider">
<span id="rangeValue">0</span>
<Input class="range" type="range" name "" value="0" min="0" max="100" onChange="rangeSlide(this.value)" onmousemove="rangeSlide(this.value)"></Input>
</div>
<script type="text/javascript">
function rangeSlide(value) {
document.getElementById('rangeValue').innerHTML = value;
}
</script>
<button class="btn-1" id="i22w3" onclick="play()">Continue</button>
<audio id="audio" src="https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.wav"></audio>
<script type="text/javascript">
var audio = document.getElementById("audio");
function play() {
if ('rangeValue' = 76) {
audio.play();
} else {
window.location.replace("https://example.com/");
}

提前感谢!

Answer 1

修复了代码中的一些东西，其中一些可能是由于忘记复制底部的几行😉。

<div id="Slider">
<span id="rangeValue">0</span>
<Input class="range" type="range" name "" value="0" min="0" max="100" onChange="rangeSlide(this.value)" onmousemove="rangeSlide(this.value)"></Input>
</div>
<script type="text/javascript">
function rangeSlide(value) {
document.getElementById('rangeValue').innerHTML = value;
}
</script>
<button class="btn-1" id="i22w3" onclick="play()">Continue</button>
<script>
function play() {
const rangeValue = document.getElementById('rangeValue').textContent;
if (rangeValue === "76") {
console.log('play sound')
} else {
console.log('replace')
}
}
</script>

Test it here

我做了什么:

• 关闭底部的脚本标签和闭包(可能是因为它是如何复制的)
• 在play()中声明并设置一个值为rangeValue，因为现在它只是一个字符串:'rangeValue'。
• 将if语句测试从=更改为===

就是这样，只要用你想要的替换我的控制台日志并重新添加我删除的元素，它应该可以工作。

Answer 2

你的代码有错误

JS中的等式https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality

和'rangeValue'应该是一个变量->滑块的值

function play() {
if ('rangeValue' === 76) { // missing `===`
audio.play();
} else {
window.location.replace("https://example.com/");
}
}