javascript - 是否有任何 DOMstring 元素未存储在新变量中以供进一步处理的原因？

Question

我是 JS、html 和 CSS 的初学者。我遇到了无法将 DOM 字符串存储到要在代码中进一步处理/使用的变量的麻烦。 const inputs = document.querySelectorAll('.controls input');我无法在代码中进一步使用输入。

我在其他一些练习中遇到过这个问题，我认为我的代码不正确，但检查了语法后，我无法弄清楚缺少什么。请帮忙!

const inputs = document.querySelectorAll('.controls input');
const handleUpdate = function () {
  console.log(this.value);//this doesn't show any output at all.
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));

<div class="controls">
  <label for="spacing">Spacing:</label>
    <input type="range" name="spacing" min="10" max="100" value="10" data-sizing="px">
  <label for="blur">Blur:</label>
    <input type="range" name="blur" value="10" min="10" max="100" data-sizing="px">
  <label for="base">Base Color:</label>
    <input type="color" name="base" value="#757B1E">
</div>
<img src="images.jpeg" alt="image">

Answer 1

使用jQuery

$('.controls input').each(function (i,value){
console.log($(this).Val());
});