无法将输入元素类型 'range' 中的值分配给 JavaScript 中的变量

Question

大家。

我试图从输入元素类型 'range' 中获取值并将其分配给变量，但我一直在获取 'undefined' 类型。请您指教，为什么会发生这种情况以及如何将类型 'range' 值分配给变量？

let n;

let range = document.getElementById('range');
range.min = '0';
range.max = '100';
range.step = '1';
range.value = '20';

range.addEventListener('input', () => {
  if (this.value > 0 && this.value < 100) {
    n = this.value;  
  }
});

console.log(n);
'undefined'

非常感谢！

Answer 1

更改 input 以查看 console 中打印的值。

将 this 替换为 range。

let n;

let range = document.getElementById('range');
range.min = '0';
range.max = '100';
range.step = '1';
range.value = '20';

range.addEventListener('input', () => {
  if (range.value > 0 && range.value < 100) {
    n = range.value;  
  }
  console.log(n);
});

<input id="range" type="range">

this 引用了 node（HTML DOM 元素）并且 range 引用了您指定的 input.

正如@Taplar 提到的，console.log() 必须在函数内部。

有关 node 的更多信息可在此处找到：Difference between Node object and Element object?

无法将输入元素类型 'range' 中的值分配给 JavaScript 中的变量

Can't assign a value from Input element type 'range' to a variable in JavaScript

javascript

types

get

range