Есть ли причина, по которой любой элемент DOMstring не сохраняется в новой переменной для дальнейшей обработки?

Question

Я новичок в JS, HTML и CSS. У меня возникла проблема с невозможностью сохранить строку DOM в переменной для дальнейшей обработки / использования в коде. const input = document.querySelectorAll ('. control 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()); });