How to use element.dispatchEvent in chrome console

Question

I created a snippet in chrome devtools but it throws this error when I run it:

Uncaught TypeError: element.dispatchEvent is not a function
at changeValue (:12:11)
at :15:1

This is my code:

var script = document.createElement("script");
  script.setAttribute("src", "//code.jquery.com/jquery-latest.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);

const changeValue = (element, value) => {
  const event = new Event('input', { bubbles: true })
  element.value = value
  element.dispatchEvent(event)
}

changeValue($('#typeahead-input-to'), 'Syd');

Is there any way I can get this code to work by running it in the chrome console?

score 0 · Answer 1 · answered Nov 05 '19 at 06:37

const changeValue = (element, value) => {
  const event = new Event('input', { bubbles: true })
  element.value = value
  element.dispatchEvent(event)
}
debugger;
changeValue($("#typeahead-input-to")[0], 'Syd');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="typeahead-input-to"></input>

How to use element.dispatchEvent in chrome console

1 Answers1