In the code below you may see a few problems ( or alot of problems ). First, I am assuming the sender element has an ID in the first line of my function. My console is full with errors as some of the divs calling this function don't have IDs in my html ( in my actual website, this is a small reproduction of the problem ). Do I have to give them ID's or can I have the function first check if they have IDs, and then proceed? Second problem is my if statement. It is always trying to check 3 parent elements up of every element calling this function! I have so many errors in the console because of this - how can I keep the same result of this function without generating those errors. For Instance, before checking the ID of 3 parent elements, can I first check to see if it even has 3 parent elements? My code is below and here is JSBIN:
<html>
<body>
<div id = "boxContainer">
<div id = "box">
<div id = "content">
<p id = "contentParagraph"
onmouseover = "someFunction( this );">content stuff</p>
</div>
</div>
</div>
<div id = "otherStuff" onmouseover = "someFunction( this );">
other stuff
</div>
<script>
function someFunction( element ){
var elementId = element.id;
var elementInner = document.getElementById( elementId ).innerHTML;
if( document.getElementById( elementId ).parentElement
.parentElement.parentElement.id == 'boxContainer' ){
document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
}
}
</script>
</body>
</html>
I'm not using jquery.
In the code below you may see a few problems ( or alot of problems ). First, I am assuming the sender element has an ID in the first line of my function. My console is full with errors as some of the divs calling this function don't have IDs in my html ( in my actual website, this is a small reproduction of the problem ). Do I have to give them ID's or can I have the function first check if they have IDs, and then proceed? Second problem is my if statement. It is always trying to check 3 parent elements up of every element calling this function! I have so many errors in the console because of this - how can I keep the same result of this function without generating those errors. For Instance, before checking the ID of 3 parent elements, can I first check to see if it even has 3 parent elements? My code is below and here is JSBIN: http://jsbin.com/somimoniva/1/edit
<html>
<body>
<div id = "boxContainer">
<div id = "box">
<div id = "content">
<p id = "contentParagraph"
onmouseover = "someFunction( this );">content stuff</p>
</div>
</div>
</div>
<div id = "otherStuff" onmouseover = "someFunction( this );">
other stuff
</div>
<script>
function someFunction( element ){
var elementId = element.id;
var elementInner = document.getElementById( elementId ).innerHTML;
if( document.getElementById( elementId ).parentElement
.parentElement.parentElement.id == 'boxContainer' ){
document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
}
}
</script>
</body>
</html>
I'm not using jquery.
Share Improve this question asked Jan 6, 2015 at 23:25 user4330208user4330208 4 |2 Answers
Reset to default 10The suggested answer is wrong regarding checking for an element's id:
typeof element.id != 'undefined';
element.id will return an empty string, if the DOM element has no id specified (and is thereby never 'undefined').
To check if an element has an id specified, you can do:
element.hasAttribute('id')
Or:
element.hasOwnProperty('id')
Or even:
element.getAttribute('id') !== null
As far as I'm concerned, the function of this 'application' can be simplified to the following script:
<script>
function someFunction( element ){
document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
}
</script>
As per this fiddle.
You can even loose most of the id's.
To answer your more specific question, you can test for an id first so that an error isn't thrown:
function hasId(element){
return typeof element.id != 'undefined';
}
Solution:
How about altering your code to use the above method. Like so:
function someFunction( element ){
var parent = element.parentElement.parentElement.parentElement;
if( hasId(parent) && parent.id == 'boxContainer' ){
document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
}
}
This performs the check for an id, while also checking that the id is "boxContainer". Here's a fiddle.
getElementById()to fetch it again? – Pointy Commented Jan 6, 2015 at 23:28