SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question get the id of an html element

    I know how to access an element by itīs id, but how could I get the id of an element

    Letīs say I have

    Code JavaScript:
    var id;
    function getid()
    {
    var get=get the id of the element that triggered the function;
    id=get
    alert(id);
    }
    <input type="submit" id="test" onclick="getid()">

    this is the code I have, but I want to use it for different fields, it works right now, but if the first change to the fields is made on field4 then the script will not work, I found a way around and made it work in my form but I am looking for a way to get the id of an element so I dont have to be looking for "ways around" in the future and also to make my code smaller.

    Does anyone know how I can retrieve the id of an element on a onchange or other event?

    Code HTML4Strict:
    <html>
    <body>
     
    <script type="text/javascript">
    var x=1;
    var ids="test";
    function fixuplow()
    {
    var myvar=(document.getElementById(ids+x).value);
    var process=(myvar.toLowerCase());
    var final=(process.charAt(0).toUpperCase() + process.slice(1));
    document.getElementById(ids+x).value=final;
    x++;
    }
     
    </script>
     
    something to up and lower case: <input type="input" id="test" onchange="fixuplow()">
    </body>
    </html>

    thanks for your help!!!!!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you pass the this keyword to the function, then the first argument refers to the element in question. So:

    HTML Code:
    <input type="input" id="test" onchange="fixuplow(this)">
    
    <script>
    function doStuff(el) {
      alert(el.id); // alerts element's id
    }</script>
    But if you used unobtrusive javascript (look it up) this isn't necessary.

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    If you pass the this keyword to the function, then the first argument refers to the element in question. So:

    HTML Code:
    <input type="input" id="test" onchange="fixuplow(this)">
    
    <script>
    function doStuff(el) {
      alert(el.id); // alerts element's id
    }</script>
    But if you used unobtrusive javascript (look it up) this isn't necessary.
    Well look, I read about unobstrusive javascript as you recomended, I am new to javascript and di not understand very well about it.

    What I understood is that one of the practices is not to use inline javascript.

    So, for instance if I have the following code

    Code HTML4Strict:
    <html>
    <head>
    <script type="text/javascript">
    function format(set)
    {
    set.style.background = "#FFFF00";
    }
    </script>
    </head>
    <body>
    <input name="test" type="text" size="50" maxlength="50" onchange="format(this)"/></p>
    </body>
    </html>

    How could I make it unobstrusive?

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just read another article about unobstrusive javascript and I think I now better understand it, I will try to do that with the previous code to see if I can figure out how to make it work, but if you could also give me some hints on it I would really apreciate it.

    Thanks for your help so far...


  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The main hint is to put all your JavaScript at the bottom of the body, not in the head. Then it will run after the HTML has loaded, which is what you want.

    Give it a go and if it doesn't work, post what you did and I'll help you.

  6. #6
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Give it a go and if it doesn't work, post what you did and I'll help you.
    Okay, I tried what you said but I canīt seem to get it working, here is what I did

    Code HTML4Strict:
    <html>
    <head>
    </head>
    <body>
    <input id="test" name="test" type="text" size="50" maxlength="50"/>
    <script type="text/javascript">
    <!--
    function format(e)
    {
    	var target = e.target;
        target.style.background = "green";
    }
    var myvar=(get.ElementById("test"));
    myvar.addEventListener('change', format);
    //-->
    </script>
    </body>
    </html>

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your syntax for addEventListener is not quite right - look at the documentation for it. You're missing the third argument (just set it to false). Also, this will not work in versions of IE prior to 9, so you have to use IE's proprietary attachEvent method (mentioned in documentation above). See here also for a guide that explains the rather major pitfall of assuming they do the same thing.

    Another thing is that your syntax for getElementById is wrong. Should be:

    Code:
    var myvar = document.getElementById('test');
    This is the sort of thing you really should be able to look up by yourself, though.

  8. #8
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Your syntax for addEventListener is not quite right - look at the documentation for it. You're missing the third argument (just set it to false). Also, this will not work in versions of IE prior to 9, so you have to use IE's proprietary attachEvent method (mentioned in documentation above). See here also for a guide that explains the rather major pitfall of assuming they do the same thing.

    Another thing is that your syntax for getElementById is wrong. Should be:

    Code:
    var myvar = document.getElementById('test');
    This is the sort of thing you really should be able to look up by yourself, though.
    well about the event listener I was not very familiar, thanks, but I am feeling retarded at the moment about the getelementbyid which I been using the whole day, I think I should take a break and relax before doing any more reading / testing

    Thank you for all your help, I will go through the links you posted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •