Jump to content

[SOLVED] accessing a parent node from link


ultrus

Recommended Posts

Hello,

I'm trying to access the id attribute of a parent <div> of a link. I'm not quite sure where to start. Here is one of my unsuccessful attempts to do this:

 

<div id="success">
<a href="javascript:alert(node.nodeParent.getAttribute('id'));">Will we succeed?</a>
</div>

 

Is this possible? Any clues? Thanks for the assist. :)

Link to comment
Share on other sites

Hello emehrkay,

Thank you for the response. Using this.parentNode.id returns an error, "this.parentNode has no properties". Below is the full page/script. Am I missing anything?:

 

<html>
<head>
<title>JavaScript Trail to Success!</title>
</head>

<body>

<div id="success">
<a href="javascript:alert(this.parentNode.id);">Will we succeed?</a>
</div>
</body>
</html>

Link to comment
Share on other sites

Well there are a few problems with your code

 

  • you're using inline js, which i recommend against, but you seem new so we'll let it slide
  • you're using href="javascipt:" that makes the scope the window and not the element

 

Easy fix would be to make the link look like this

 

<a href="#" onclick="alert(this.parentNode.id); return false;">Will we succeed?</a>

 

The better/more accessible/whatever fix would be to make your code look like this

<html>
<head>
<title>JavaScript Trail to Success!</title>
<script type="text/javascript">
    onload = function(){
        var link = document.getElementById('link');
        link.onclick = function(){
            alert(this.parentNode.id); 
            return false; 
        };
    };
</script>
</head>

<body>

<div id="success">
<a href="#" id="link">Will we succeed?</a>
</div>
</body>
</html>

Link to comment
Share on other sites

emehrkay,

Sweet. That should work. Thanks much!

 

The code I placed is the start of some more complicated content I don't have full control over. Divs will be added and removed using JavaScrpt, with external static content (for the most part), being loaded into the divs when added. For example:

 

<div id="success1">
<input id="oneLiner" type="text" size="60"><br>
<a href="#" onclick="alert(this.parentNode.id); return false;">Will we succeed?</a>
</div>

<div id="success2">
<input id="oneLiner" type="text" size="60"><br>
<a href="#" onclick="alert(this.parentNode.id); return false;">Will we succeed?</a>
</div>

<div id="success3">
<input id="oneLiner" type="text" size="60"><br>
<a href="#" onclick="alert(this.parentNode.id); return false;">Will we succeed?</a>
</div>

 

The way I'm getting this to work now, is passing the id get variable to an external php file, resulting in something like this:

 

<div id="success3">
<input id="oneLiner" type="text" size="60"><br>
<a href="#" onclick="alert('success3'); return false;">Will we succeed?</a>
</div>

 

Perhaps I should just stick with this if using inline js is a bad idea. I'll look more into this topic.

 

Thanks.

 

Link to comment
Share on other sites

If it is easier to use the inline js, do so. The *ideal* way is not to. If you check the source of some of the best web applications out there - google docs, gmail, yahoo mail, etc - you'll see a lot of inline calls. inline has benefits, but the new cool thing to do is not to use it :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.