具有onchange功能的HTML5 Slider [英] HTML5 Slider with onchange function
问题描述
我有一个滑块(输入类型范围),它应该在更改值时运行一个函数。然后,该函数应在单独的div容器中显示新值。在函数中发出警报后,我知道函数没有被调用,但是在谷歌搜索了一个小时并尝试了几种不同的方法之后我就找不到错误了。
I have a slider (input type range) that is supposed to run a function when the value is being changed. The function should then display the new value in a seperate div-container. After placing an alert in the function, i know that the function isn't being called, but after googling for an hour and trying a few different methods i just can't find the error.
这是HTML部分:
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
Javascript:
Javascript:
//Slider
function updateSlider(slideAmount)
{
alert("error");
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
提前致谢!
推荐答案
它有效,你需要确保在渲染元素时定义了javascript函数,f.ex。
It works, you just need to make sure that the javascript function is defined when the element is rendered, f.ex.
<script>
function updateSlider(slideAmount) {
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
参见此演示: http://jsfiddle.net/Mmgxg/
更好的方法是删除内联 onchange
属性:
A better way would be to remove the inline onchange
attribute:
<input id="slide" type="range" min="1" max="100" step="1" value="10">
<div id="sliderAmount"></div>
然后在你的javascript中添加监听器:
And then add the listener in your javascript:
var slide = document.getElementById('slide'),
sliderDiv = document.getElementById("sliderAmount");
slide.onchange = function() {
sliderDiv.innerHTML = this.value;
}
这篇关于具有onchange功能的HTML5 Slider的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!