get the id of an html element

**tlacaelelrl** · Apr 11, 2011 14:43

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!!!!!

**Raffles** · Apr 11, 2011 15:27

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.

**tlacaelelrl** · Apr 11, 2011 22:06

Originally Posted by Raffles

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?

**tlacaelelrl** · Apr 11, 2011 22:19

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...

**Raffles** · Apr 12, 2011 03:00

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.

**tlacaelelrl** · Apr 12, 2011 03:44

Originally Posted by Raffles

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>

**Raffles** · Apr 12, 2011 05:46

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.

**tlacaelelrl** · Apr 12, 2011 11:31

Originally Posted by Raffles

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.

User Tag List

Thread: get the id of an html element

Thread Tools

Display

get the id of an html element

Bookmarks

Bookmarks

Posting Permissions