Блог

Главная - Вопросы по программированию - Как передать значение выбранного ввода в функцию EventListener

Как передать значение выбранного ввода в функцию EventListener

#javascript #html

#javascript #HTML

Вопрос:

Я совершенно новичок в JavaScript, пытаюсь добавить простой прослушиватель событий в консоль.запишите выбранное значение цвета из ввода, которое скрипт добавляет в div при загрузке страницы.

HTML:

 <html>
  <div id="myDiv">
  </div>
</html>

JavaScript:

 /* First add an input color selector as a child of #myDiv 
with a datalist of available colors */
document.querySelector("#myDiv").innerHTML  = `
  <input id="myInput" type="color" list="presetColors" 
       colorpick-eyedropper-active="false">

  <datalist id="presetColors">
    <option>#0275d8</option>
    <option>#5cb85c</option>
  </datalist>
`;

/* Trying to console.log the color value 
that was chosen in the input */
function myFunction(event) {
  console.log(event.value);
}

/* Adding an event listener so that when the color 
in the input changes, the function is called */
document
  .querySelector("#myInput")
  .addEventListener("change", myFunction(e));

Вот JSFiddle, с которым можно поиграть.

Я не понимаю сообщение об ошибке "<a class='gotoLine' href='#62:1'>62:1</a> ReferenceError: e is not defined"

Я имею в виду, что здесь, на MDN, написано:

Исключение JavaScript «переменная не определена» возникает, когда где-то упоминается несуществующая переменная.

Итак, как мне передать значение ввода в функцию?

Ответ №1:

Две вещи:

Во-первых, когда вы указываете четный обработчик здесь:

 .addEventListener("change", myFunction(e));

Вам не нужно указывать параметры. На самом деле, вы даже не вызываете myFunction функцию на данный момент вообще. Вы просто сообщаете слушателю, какая функция отвечает за обработку события. Вам просто нужно написать:

 .addEventListener("change", myFunction);

Прослушиватель событий — это то, что передает объект «событие» после фактического запуска события.

Во myFunction -вторых, вам нужно получить доступ к значению одним из двух способов:

 console.log(event.currentTarget.value);

или

 console.log(this.value);

Ответ №2:

В объявлениях EventListener javascript ожидает либо просто имя функции, либо анонимную функцию. .addEventListener("change", myFunction(e)); недопустимо. Кроме того, вы должны использовать полный myFunction(event) , а не просто myFunction(e) . Вместо этого вы должны сделать:

 document
  .querySelector("#myInput")
  .addEventListener("change", () => myFunction(event));

Ответ №3:

Гораздо более простым подходом было бы следующее. Обратите внимание на oninput=»console.log(this.value)»

Вы также неправильно использовали queryselector, если хотели найти его на основе идентификатора, который сработал бы document.getElementById. Во всяком случае, надеюсь, это поможет.

 document.querySelector("div").innerHTML  = `
  <input id="myInput" type="color" list="presetColors" colorpick-eyedropper-active="false" oninput="console.log(this.value)">
  <datalist id="presetColors" >
    <option>#0275d8</option>
    <option>#5cb85c</option>
  </datalist>
`; 
 <div><div>

Ответ №4:

Взгляните на этот документ для «Обратного вызова прослушивателя событий». listener Должна быть функция обратного вызова с event первым параметром, вы могли бы явно вызвать это

 addEventListener("change", event => myFunction(event));

или просто передайте функцию, как вы реализовали выше

 addEventListener("change", myFunction);
 
 /* First add an input color selector as a child of #myDiv 
with a datalist of available colors */
document.querySelector("#myDiv").innerHTML  = `
  <input id="myInput" type="color" list="presetColors" 
       colorpick-eyedropper-active="false">

  <datalist id="presetColors">
    <option value="#0275d8">#0275d8</option>
    <option value="#5cb85c">#5cb85c</option>
  </datalist>
`;

/* Trying to console.log the color value 
that was chosen in the input */
function myFunction(event) {
  console.log(event.target.value);
}

/* Adding an event listener so that when the color 
in the input changes, the function is called */
document
  .querySelector("#myInput")
  .addEventListener("change", event => myFunction(event)); 
 <html>
<div id="myDiv">
</div>

</html>

Более того, чтобы получить значение для option , вы должны указать каждый option из них с value атрибутом и захватить его с event.target.value помощью , а не event.value

Комментарии:

1. Это возвращает undefined .

2. @norcaljohnny выше было просто продемонстрировать OP, как он мог попасть в myFunction