显示来自"输入范围"的值在另一个元素中给出" undefined"

时间:2017-07-05 10:07:01

标签: javascript html

以前曾经问过这个问题,但我发现没有可靠的,有效的,简单的JS解决方案,所有的解决方案都使用框架,或者只是不起作用。

我只想获得输入值"范围"值并将它们显示在span元素中。

我未定义,控制台中没有错误。

这是JS代码:

document.getElementById("height").addEventListener("input", 
sliderChange(this.value));

function sliderChange(val) {
document.getElementById('yourHeight').innerHTML = val;
}

此外,我想存储用户输入并用于另一个函数来计算最终结果(此功能尚不存在)。

这是链接:

https://codepen.io/damianocel/pen/ZyRogX

2 个答案:

答案 0 :(得分:6)

您需要将函数传递给addEventListener

document.getElementById("height").addEventListener("input", function() { sliderChange(this.value) });

答案 1 :(得分:1)

在此代码document.getElementById("height").addEventListener("input", sliderChange(this.value))中,this引用全局window对象而不是输入,这就是this.valueundefined的原因。

您需要将listener回调函数传递给addEventListener,以便它有自己的范围,this将引用您的input

document.getElementById("height").addEventListener("input", function(){ sliderChange(this.value)} );

这是updated working Demo