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
https://forums.phpfreaks.com/topic/85220-solved-accessing-a-parent-node-from-link/
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>

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>

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.

 

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 :)

Archived

This topic is now archived and is closed to further replies.

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