javascript - 使用 HTML slider 元​​素传递变量 ondrag

Question

我用JS编写了一个函数，需要向其中传递一个变量。在这种情况下，实际的功能并不重要，但我不知道如何让它正确地传递变量。

HTML 看起来像这样 -

<input type="range" value="1" min="1" max="1.6" step=".1" id="slider" ondrag="callFunction(value)" />

然后，我们将该函数描述为..

<script>
        function callFunction(v)
        {
           ...
        }
</script>

ondrag="callFunction(value)" 不起作用，因为该值只是一个字符串...我尝试连接该值，但似乎会引发错误。

正确的做法是什么？

谢谢

Answer 1

这就是我一直以来的做法 - 即通过代码附加事件处理程序。执行此操作时，在处理程序函数内，关键字 this 引用已触发事件的元素。因此，如果我们想在拖动时提取 slider 的值或执行其他操作，这是一种方法。

"use strict";
function qsa(sel,par=document){return par.querySelectorAll(sel)}
function byId(id){return document.getElementById(id)}

window.addEventListener('load', onLoaded2, false);

function onLoaded2(evt)
{
	byId('slider').addEventListener('input', onSliderInput, false);
}

function onSliderInput(evt)
{
	qsa('span')[0].textContent = this.value;
}

<input type="range" value="1" min="1" max="1.6" step=".1" id="slider"/> Value:<span>1</span>