Question

我已经成功设置了滑条输入。该值正确显示在网页上，但是我似乎无法提取变量以在滑块功能之外使用。滑块是大型应用程序中许多输入类型之一。

我在函数外设置了var声明，所以我认为输出将是一个全局变量，但它不起作用。该变量仅在滑块功能内显示正确的输出。

请参见下面的代码：

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">


  <p>Input Value: <span id="demo"></span></p>
</div>


<script>

var output_var=0

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

output.innerHTML = slider.value;
console.log("outside slider output", output.innerHTML)

slider.oninput = function() {
  output.innerHTML = this.value;
  output_var=output.innerHTML

  console.log("output_var inside the slider function - works correctly", output_var)
}

console.log("output_var outside the slider function - doesn't work", output_var)

</script>

我希望output_var可以显示最终的滑块结果，而不管它在函数内部还是外部，但是正确的值仅显示在滑块函数内部。我尝试了其他方法，但似乎无法将最终的幻灯片值转换为全局变量。我敢肯定这是一个简单的修复程序，但是我对编程还很陌生，无法解决。

Answer 1

Tha控制台正确显示

滑块功能之外的output_var-无效0

它为0，因为这就是初始化变量 output_var 的方式。

var output_var=0

要获取实际值，您需要像对其进行初始化

var output = document.getElementById("demo");
output.innerHTML = slider.value;
output_var=output.innerHTML;

否则，在oninput事件触发之前将无法获得真实的值。

这是工作代码：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
var output_var = output.innerHTML;

console.log("outside slider output", output.innerHTML)

slider.oninput = function() {
  output.innerHTML = this.value;
  output_var = output.innerHTML

  console.log("output_var inside the slider function - works correctly", output_var)
}

console.log("output_var outside the slider function - doesn't work", output_var);

document.getElementById("theButton").addEventListener("click",function(){
console.log("output_var somewhere else", output_var);
});

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Input Value: <span id="demo"></span></p>
</div>
<button id="theButton">What's the value</button>

Answer 2

正如Obscure在他的回答中提到的那样，您需要了解javascript是如何执行的。您正在定义slider.input函数，并且在触发该事件时（即，滑块值更改时），您将output_var值设置为滑块值。但是，您的console.log会在页面加载时运行在滑块功能之外。运行oninput函数后它不会得到更新，因此此时的output_var仍然是初始值。

如果您还有另一个按钮，当单击该按钮时会发出警报以告知您output_var值，您会看到该按钮确实更新了。

您需要想象一下您的代码可以一次全部执行，但是每次oninput函数中的值每次更改都会运行-而不是在此范围之外的所有代码。但是，其他事件监听器将能够访问更新后的值。我建议您查看javascript代码的执行方式，并尝试对函数作用域有更多的了解，以了解更多信息。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
var output_var = output.innerHTML;

console.log("outside slider output", output.innerHTML)

slider.oninput = function() {
  output.innerHTML = this.value;
  output_var = output.innerHTML

  console.log("output_var inside the slider function - works correctly", output_var)
}

document.getElementById('test').addEventListener('click', () => {
alert("output var is now " + output_var);
});

console.log("output_var outside the slider function - doesn't work", output_var)

 <button id="test">Click me before and after changing slider</button>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Input Value: <span id="demo"></span></p>
</div>

无法从滑块输入中提取值

2 个答案: