/    Sign up×
Community /Pin to ProfileBookmark

getelementbyid( ‘my_anchor_tag’ ) giving strange results

Copy linkTweet thisAlerts:
Feb 10.2012

hello;

when I attempt to use getElementById on a <a> tag I am NOT getting the [I][object HTMLAElement][/I] as I would expect. Instead I am getting the URL of the page (or if my href has a value, then I get that value ).

[CODE]
<body>
<a id = ‘my_anchor_tag’
href =”
> </a>
<script language=”javascript” type=”text/javascript”>
alert( document.getElementById( “my_anchor_tag” ) );
</script>
</body>
[/CODE]

Any thoughts as to why I am not getting the actual anchor element returned in the alert statement…

thanks,
Shannon

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JunkMaleFeb 10.2012 — document.getElementById( "my_anchor_tag" ) is an Object.

You need to access a property of that object to get at the data, example.
[CODE]
alert( document.getElementById( "my_anchor_tag" ).id );[/CODE] will pop up an alert message with the name of the elements ID, which should be 'my_anchor_tag', you can access other properties of the object in this way.

Also...

if your calling the element before the page has fully loaded can result in errors.
Copy linkTweet thisAlerts:
@Logic_AliFeb 10.2012 — hello;

when I attempt to use getElementById on a <a> tag I am NOT getting the [I][object HTMLAElement][/I] as I would expect. Instead I am getting the URL of the page (or if my href has a value, then I get that value ).[/quote]That's probably just because the element's toString method displays the href value. You are still getting a reference to the element as this code demonstrates:
&lt;html&gt;
&lt;body&gt;
&lt;a id = 'my_anchor_tag' href='#'&gt;ENLARGED LINK&lt;/a&gt; <br/>
&lt;script type="text/javascript"&gt;
document.getElementById( "my_anchor_tag" ).style.fontSize = '3em';
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@dsdsdsdsdauthorFeb 10.2012 — Logic Ali, JunkMale ... thanks for your responses.

I see what you are both saying. Apparently my problem is elsewhere ... I am trying to trigger the <a>'s onclick handler ...

-- Shannon
Copy linkTweet thisAlerts:
@JunkMaleFeb 10.2012 — then... [CODE]document.getElementById( "my_anchor_tag" ).click()[/CODE] is what you need to cause the element to be "clicked".

OR

do you want to click the link to have an [B]onclick[/B] event and have an alert in a function fire?

Also you should note that the document body must fully load before any DOM elements become available to document.getElementById or its cousins.
Copy linkTweet thisAlerts:
@dsdsdsdsdauthorFeb 10.2012 — yeah I think that my problem is related to loading sequence ... when I do a simple example, it works on all of my browsers, but my application version does not ... I'm breaking it apart now...
Copy linkTweet thisAlerts:
@JunkMaleFeb 11.2012 — If you need to have events fire only when the document has loaded, you can do one of two things.

[code=html]<body onload="myfunc()">[/code] will call myfunc() when the web page has loaded and all its elements are available.

adding a [CODE]window.onload = function(){
// some stuff

}[/CODE]

will also run any function of code you put in plase

BUT

you CAN NOT HAVE BOTH !!! note that setting one will overwright the other, so needing more than one function to file will need the above demonstrated method of window.onload and your function calls in order that you need them called

[CODE]window.onload = function(){
domEle = document.getElementById("myElements");
processDOMS();
deleteRedundantVars();
updateDisplayElement();
makeCupOfCoffee();
}[/CODE]

This would certainly cure your access issues by making the site code wait until DOM is ready. Many years ago I herd an analogy, DOM is like a woman getting ready to go out to dinner. You can't rush it, you have to wait until its ready... Sounds sexist but clearly illustrates that you have to wait for DOM to become ready before you can wine & dine.
×

Success!

Help @dsdsdsdsd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...