javascript - 接收 slider 输出作为变量

Question

我想使用这里的 slider -

<main>
    <form oninput="output.value = Math.round(range.valueAsNumber / 1000)">
      <h2>
        Choose the Height of Your Building
      </h2>
      <div class="range">
        <input name="range" type="range" min="0" max="100000">
        <div class="range-output">
          <output class="output" name="output" for="range">
            50
          </output>
        </div>
      </div>
    </form>
  </main>

<button type="button" onclick="">Submit</button>

我想让 slider 的输出成为一个变量。例如，如果将 slider 更改为 25，则变量的值为 25。尽管如此，我不确定要在 onclick 函数中放入什么。帮忙？

Answer 1

我会使用 onchange 事件而不是 onclick。将您的输入更改为:

<input name="range" type="range" min="0" max="100000" onchange="rangeValue=this.value">

其中 rangeValue 是您希望为其分配新值的全局 JS 变量的名称。例如，在脚本标签内:

var rangeValue;

然后，您可以在事件处理程序中使用 rangeValue 变量来单击提交按钮。像这样的事情:

<button type="button" onclick="handleClick()">Submit</button>

然后在脚本标签内:

function handleClick(){
    //do something with rangeValue variable
    console.log(rangeValue);
}