如何在JavaScript中使用滑块onChange事件的更新值并设为全局变量？

1. 声明全局变量 #

在函数外部定义全局变量，初始值和滑块默认值保持一致：

// 全局变量，初始值与滑块默认值匹配
let sliderValue = 50;

2. 修改滑块事件函数更新全局变量 #

先修正你代码里的getElementbyId拼写错误（正确写法是getElementById），然后在函数内直接更新全局变量：

<input id="slider" type="range" min="0" max="100" value="50" step="1" oninput="myFn()">

function myFn(){
  // 获取滑块值并更新全局变量
  sliderValue = document.getElementById("slider").value;
  // 如果需要数字类型（Canvas绘图常用），可以转成Number
  // sliderValue = Number(document.getElementById("slider").value);
  console.log(sliderValue);
}

注意：把onchange换成oninput能实现实时同步——onchange只有松开鼠标时才触发，oninput在拖动滑块过程中就会实时更新值。

3. 在Canvas中使用全局变量 #

直接在Canvas的绘制逻辑里调用这个全局变量，用它来更新你的对象属性，比如大小、位置等：

// 获取Canvas上下文
const ctx = document.getElementById("myCanvas").getContext("2d");

function draw() {
  // 清除画布
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
  // 用全局变量控制对象，比如绘制随滑块变化大小的矩形
  const rectSize = sliderValue;
  ctx.fillRect(50, 50, rectSize, rectSize);
  
  // 循环调用实现实时更新
  requestAnimationFrame(draw);
}

// 启动绘制
draw();

完整示例代码 #

<input id="slider" type="range" min="0" max="100" value="50" step="1" oninput="myFn()">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;"></canvas>

<script>
let sliderValue = 50;
const ctx = document.getElementById("myCanvas").getContext("2d");

function myFn(){
  sliderValue = Number(document.getElementById("slider").value);
}

function draw() {
  ctx.clearRect(0, 0, 300, 300);
  // 用滑块值控制矩形大小
  ctx.fillRect(50, 50, sliderValue, sliderValue);
  requestAnimationFrame(draw);
}

draw();
</script>

内容的提问来源于stack exchange，提问作者Growing Mind