this attr id not working

Question

as the title says  I keep getting  undefined  when I try to get the id attribute of an element  basically what I want to do is replace an element with an input box when the value is  other    Here is the code   function showHideOther obj        var sel   obj options obj selectedIndex  value      var ID     this  attr  id        alert ID        if  sel     other               this  html   lt input type  text  name      ID      id      ID        gt            else             this  css                display    none                        The HTML              lt span class  left  gt  lt label for  race  gt Race   lt  label gt  lt  span gt             lt span class  right  gt  lt select name  race  id  race  onchange  showHideOther this    gt               lt option gt Select one lt  option gt               lt option gt one lt  option gt               lt option gt two lt  option gt               lt option gt three lt  option gt               lt option value  other  gt Other lt  option gt             lt  select gt             lt  span gt    It is probably something small that I am not noticing  what am I doing wrong

User · Accepted Answer

Because of the way the function is called (i.e. as a simple call to a function variable), this is the global object (for which window is an alias in browsers). Use the obj parameter instead.

Also, creating a jQuery object and the using its attr() method for obtaining an element ID is inefficient and unnecessary. Just use the element's id property, which works in all browsers.

function showHideOther(obj){ 
    var sel = obj.options[obj.selectedIndex].value;
    var ID = obj.id;

    if (sel == 'other') { 
        $(obj).html("<input type='text' name='" + ID + "' id='" + ID + "' />");
    } else {
        $(obj).css({'display' : 'none'});
    }
}

User · Answer

What are you expecting   this  to refer to   Do you mean sel attr  id    perhaps

User · Answer

Remove the inline event handler and do it completly unobtrusive  like           race   bind  change   function      var  this     this         id       this 0  id     if   other   test   this  val             this replaceWith     lt input  gt                type   text             name   id            id  id

User · Answer

your using this in a function  when you should be using the parameter   You only use   this  in callbacks    from selections like     a   click function        alert   this  href        In closing  the proper way  using your code example  would be to do this  obj attr  id

User · Answer

You could also write your entire function as a jQuery extension  so you could do something along the lines of      element   showHideOther      function            extend   fn            showHideOther  function                   each this  function                     var Id     this  attr  id                    alert Id                                         return this                                       jQuery     Not that it answers your question     Just food for thought

User · Answer

You can do   onchange  showHideOther call this      instead of   onchange  showHideOther this     But then you also need to replace obj with this in the function

User · Answer

Change   var ID     this  attr  id      to  var ID     obj  attr  id      Also you can change it to use jQuery event handler       race   change function         var select     this       var id   select attr  id        if select val       other             select replaceWith   lt input type  text  name      id      id      id        gt           else           select hide

User · Answer

In the function context  this  its not referring to the select element  but to the page itself   Change var ID     this  attr  id    to var ID     obj  attr  id      If obj is already a jQuery Object  just remove the     around it

User · Answer

I recommend you to read more about the this keyword   You cannot expect  this  to select the  select  tag in this case   What you want to do in this case is use obj id to get the id of select tag

[javascript] $(this).attr("id") not working

Examples related to javascript

Examples related to jquery