如何使用滑块输入更改Javascript中的填充[已解决]

我试图通过使用滑块输入来更改图像上的填充。这个想法是用户可以上传一张图片，并对其进行定制。其中一个选项是用于更改水平填充的滑块（每个滑块一个）。每个滑块的值介于-50到50之间，默认值为0。 例如，如果用户向左移动“水平填充滑块”（负值），则左右填充都将减少，如果向右移动滑块（正值），则左右填充都将增加

我已经用这些值创建了HTML滑块。然后，在javascript文件中，我为输入值创建了一个事件侦听器，并创建了一个函数来更改它，但根本不起作用

HTML代码：

<form class="range-field mt-2">
  <input type="range" min="-50" max="50" value="0" id="horizontal-padding" 
  step="2" />
</form>

谁能告诉我出了什么事？非常感谢

var slider = document.getElementById("horizontal-padding").value;

您希望访问HTML元素，而不是它的值。您应该删除“.value”，它就会工作。此外，我建议使用“输入”事件，因为只有在释放滑块时才会触发“更改”

---

另外，我假设您在试图更改画布之前已经选择了它。

什么是

myCanvas

您还需要在js中选择它

var myCanvas = document.getElementById()
var slider = document.getElementById("horizontal-padding")

silder.addEventListener('change', () => {
        myCanvas.style.padding = slider.value
  });

答复: 要使其处于工作状态，需要进行许多更改

• 您正在使用

  .value

  声明

  滑块

  。这并不指向元素，而是指向值

• 您需要声明

  myCanvas

  变量以指向元素

• 您需要为

  CSS

  更新添加一个单元。这可以是

  px

  （最常见），

  em

  ，

  rem

  ，

  vw

  ，

  vh

  ，等等。一个简单的整数（由

  滑块给出。值

  ）不会将其截断

• 填充

  在视觉上不能表示为负片，因为它不是设计为

  插入

  低于值

  0

  。这意味着滑块转到

  -50

  没有多大意义。在下面的代码片段中，我将其更新到范围

  0-100

---

代码：

---

例子：

var slider=document.getElementById（“水平填充”），
myCanvas=document.getElementById（“myCanvas”）；
slider.addEventListener（'change'，function（）{
myCanvas.style.padding=slider.value+“px”；
});
画布{
边框：1px纯黑；
}

你的浏览器不支持HTML5画布
True，我在我的原始帖子中忘了提到它，但我已经声明了。谢谢你的回复，现在问题已经解决了。上面的第一个答案解决了这个问题。快速问题：如果我想做同样的事情，但是要做水平填充（仅左和右填充）呢？我尝试了这个方法，但不起作用：``mycanvas.style.padding=“0，slider.value+px，0，slider.value+px”```
var myCanvas = document.getElementById()
var slider = document.getElementById("horizontal-padding")

silder.addEventListener('change', () => {
        myCanvas.style.padding = slider.value
  });

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('change', function() {
    myCanvas.style.padding = slider.value + "px";
});