使用范围滑块更改 DiV 元素宽度的 JavaScript

Question

我正在尝试做一个 html5 画布绘图应用程序，但我不知道如何使用范围滑块更改形状的线宽。 请帮助我使用 javascript 或告诉我哪里错了

这是我在 JS 中尝试过的：

function change_width(element) {
    lineWidth = element.innerHTML
  }

Answer 1

在有效的内联版本中，您使用元素的值。

在另一个版本中你使用了innerHTML。

尝试改用 element.value。

Answer 2

您可以很容易地使用单个外部事件侦听器来处理用于控制画布属性的每个输入，而不是使用简单的内联事件处理程序。如果您要为每个 DOM 元素分配与要修改/监视的属性相关的数据集属性，您可以在页面加载时将这些属性分配给全局 window 对象，并在 input 元素的值更改时更新这些窗口属性.

以下代码只是将名称和值打印到控制台，但您可能会使用回调来重绘画布以反映变量更改？！

document.querySelectorAll('input[data-attr]').forEach(input=>{
  window[ input.dataset.attr ]=0;
  
  input.addEventListener('change',function(e){
    window[ this.dataset.attr ]=this.value;
    console.info('attr:%s value:%s',this.dataset.attr,window[ this.dataset.attr ])
  })
  
  
});

<div id="toolbar2">

    <input data-attr="fillColor" type="color" class="color-picker" />
    <input data-attr="strokeColor" type="color" class="color-picker" />
    <input data-attr="lineWidth" type="range" min="1" max="50" class="pen-range" />
    <input data-attr="opacity" type="range" min="1" max="50" class="pen-range" />
    
</div>