Javascript 更新文本JS函数，在除边缘以外的所有位置工作

我还没有在任何类似的问题中找到正确的答案，所以我希望有人能给我指出正确的方向

我有一个简单的脚本，根据范围滑块选择更新一些文本。我注意到，除了Edge之外，这在所有方面都有效，而且我对Javascript几乎没有经验，我想知道如何修复它

HTML：

<input type="range" min="1" max="3" step="1" id="pick_fruit" onchange="updateTextInput(this.value);" oninput="amount.value=rangeInput.value">

<p id="fruit_value">Pick a fruit</p>

摘一个水果

剧本：

<script type="text/javascript">

    function updateTextInput() {
        var fruit_range = Number(document.getElementById("pick_fruit").value);
        var fruit_value = "";

            if ( 
                fruit_range === 1 ) { 
                fruit_value = "Apples";
            }
            else if ( 
                fruit_range === 2 ) {
                fruit_value = "Oranges";
            }
            else if ( 
                fruit_range === 3 ) {
                fruit_value = "Pears";
            }

        document.getElementById('fruit_value').innerHTML = fruit_value;

    }
</script>

函数updateTextInput（）{
var fruit_range=Number（document.getElementById（“pick_fruit”）.value）；
var fruit_value=“”；
如果（
果_范围===1{
水果_value=“苹果”；
}
若否（
水果（范围===2）{
水果价值=“橙子”；
}
若否（
水果（范围===3）{
水果价值=“梨”；
}
document.getElementById（'fruit_value'）。innerHTML=fruit_value；
}

任何帮助都将不胜感激

---

提前感谢

使用

oninput

事件触发该功能。将int映射到字符串的对象会稍微清理条件字符串

constfruitmap={1:'Apples'，2:'Oranges'，3:'Pears'}
函数updateTextInput（）{
常量v=+document.getElementById（“pick_fruit”）.value
document.getElementById（'fruit_value'）。innerHTML=fruitMap[v]；
}

摘一个水果

你不需要添加

var fruit\u range=Number（document.getElementById（“pick\u fruit”）.value）

因为您已经从您的
函数（updateTextInput（））
中获取了值，所以需要在函数中提供一个参数来获取
onchange
值。我试图简化你可以测试的代码



摘一个水果

var fruit_value=“”；
函数updateTextInput（值）{
如果（值==1）{
这是一个.fruit\u value=“苹果”；
}
else if（值==2）{
this.fruit_value=“橙子”；
}
else if（值==3）{
这是一个“水果”值=“梨”；
}
document.getElementById（'fruit_value'）。innerHTML=fruit_value；
}
这很有效。很好的解决方案。感谢您的快速回复，甚至改进了我的代码！