1

I'm brand new to Javascript and trying to attach an event handler to a select list. Here is my html:

<select id="x_selector"></select>

to which I'm adding a bunch of option entries successfully. However I want to add an on change method. This jquery javascript works:

let xsel = $("#x_selector");
xsel.on("change", event => {console.log(event)});

But this doesn't:

var xSelector = document.getElementById('x_selector');
xSelector.on("change", event => {console.log(event)});

With the latter one I get a console TypeError: xSelector.on is not a function.

So what is the difference between document.getElementById and the jquery selector?

Thomas Browne
  • 23,824
  • 32
  • 78
  • 121
  • 2
    `.on()` is a jquery method so, you not used in javascript, for javascript you try `.addEventListener("change", function(){` – Paresh Maghodiya Aug 02 '17 at 12:46
  • *So what is the difference* : `$(sel)` gives you a jquery object while `.getElementById` gives you a document node. You can get the node from jquery with `$(sel).get(0)` and the other way by wrapping in `$()` eg `$(xSelector)`. The jquery 'selector' does not have to be text, it can be a DOM node. As they are different object types, you get different methods. – freedomn-m Aug 02 '17 at 12:53

2 Answers2

6

.on is a jQuery method. With vanilla javascript, use .addEventListener.

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
  • or try this : $(xSelector).on("change", event => {console.log(event)}); https://developer.mozilla.org/en-US/docs/Web/Events – Álvaro Touzón Aug 02 '17 at 12:47
  • thanks, now I have both in there because I need to add options programatically too. this works: xSelector.add(new Option("test", "test")); but I don't know how to do this in jquery. Seems silly to have a mix of jquery and getElementById on the same page... – Thomas Browne Aug 02 '17 at 12:49
  • @thomas xSelector.append($(" – Jonas Wilms Aug 02 '17 at 12:51
  • @Thomas exactly, if you have included jQuery you should as well use it. – Jeremy Thille Aug 02 '17 at 12:55
  • @Jonas w so what exactly is the syntax within { and } if I want to add to do exactly the same as xSelector.add(new Option("test", "test")); ? – Thomas Browne Aug 02 '17 at 13:05
  • @thomas its an options object. Have a look at http://docs.jquery.com or the answer ive linked to for more info – Jonas Wilms Aug 02 '17 at 13:06
  • @Jonas w yep got it now! JS sure is a language where this is "more than one way to do stuff!!". So I have xsel.append($(" – Thomas Browne Aug 02 '17 at 13:09
  • @thomas browne js is rather a language which is easily extensible. Thats why there are so much librarys/utilities etc. – Jonas Wilms Aug 02 '17 at 13:10
0

Try this one: pure working

document.getElementById("x_selector").addEventListener("change", myFunction);

function myFunction() {
    var x = document.getElementById("x_selector");
    x.value = x.value.toUpperCase();
}
Enter your name: <input type="text" id="x_selector">
S Dhanissh
  • 103
  • 1
  • 1
  • 15