JavaScript 用于使用范围 slider 更改 DiV 元素的宽度

Question

我正在尝试做一个 html5 canvas 绘图应用程序，我无法弄清楚如何使用范围 slider 更改形状的线宽。 请帮助我使用 javascript 或告诉我哪里错了这是我的 html 代码：

<div id="toolbar2">

    <input oninput="strokeColor = this.value" type="color" class="color-picker">
    <input oninput="lineWidth = this.value" type="range" min="1" max="50" class="pen-range">
    
</div> 

oninput strokeColor 工作。

这是我在 JS 中尝试过的：

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

Answer 1

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

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

尝试使用 element.value 代替。

Answer 2

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

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

 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>