Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    s42
    s42 is offline
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting the inner HTML of a span element, odd errors

    So, i'm trying to get the inner html of an element to put into a tooltip. Basically i'm just moving some HTML from one node to another node.
    What I tried to do was access the element and get its class, and then if the class equaled what i wanted i would fetch the innerHTML and then return it, however i keep getting a 'document.getElementById('tooltip').nextSibling.getAttribute('class'); is not a function'
    I've done some playing with it, but I don't really know what's wrong because the error message is so ambiguous in firebug, its difficult for me to know what to fix. Here is the code for the block that is giving me problems:
    Code:
    function sansAJAX(target) { //the name of this function is a little misleading, I am not using any AJAX for this. It's just a joke at myself.
    69 var class = document.getElementById(target).nextSibling.getAttribute('class');
    70 if (class == 'tooltip') {
    71 var text = document.getElementById(target).nextSibling.span.innerHTML;
    72 return(text);
    73 }
    74 else {
    75 return(false);
    76 }
    77}
    Lemme know if you need more information.
    Last edited by s42; 06-14-2007 at 04:54 AM. Reason: Ambiguousness.

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Make sure you are not trying to get the attributes of a white space in your target

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Two issues…

    class is an ECMA Script reserved keyword, which means that the word is likely to have special meaning to that language causing a misunderstanding in some browsers, so should be avoided in the custom functions.
    The best supported approach is to use the DOM 0 method…

    Code:
    obj.className
    e.g.
    Code:
    function sansAJAX(target) { // the name of this function is a little misleading, I am not using any AJAX for this. It's just a joke at myself.
    
    	var cName = document.getElementById(target).nextSibling.className;
    	if (cName == 'tooltip') {
    		var text = document.getElementById(target).nextSibling.span.innerHTML;
    		return(text);
    	} else {
    		return(false);
    	}
    
    }
    Next, if you're aiming to address the span within the nextSibling, you can't simply slip in span. YOu'll need to address it via the DOM.

    e.g.
    Code:
    getElementsByTagName('span')[0]
    So, try this…
    Code:
    function sansAJAX(target) {
    
    	var cName = document.getElementById(target).nextSibling.className;
    	if (cName == 'tooltip') {
    		var text = document.getElementById(target).nextSibling.getElementsByTagName('span')[0].innerHTML;
    		return text;
    	} else {
    		return false;
    	}
    
    }

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters View Post
    Two issues…

    class is an ECMA Script reserved keyword, which means that the word is likely to have special meaning to that language causing a misunderstanding in some browsers, so should be avoided in the custom functions.
    The best supported approach is to use the DOM 0 method…

    Code:
    obj.className
    e.g.
    Code:
    function sansAJAX(target) { // the name of this function is a little misleading, I am not using any AJAX for this. It's just a joke at myself.
    
    	var cName = document.getElementById(target).nextSibling.className;
    	if (cName == 'tooltip') {
    		var text = document.getElementById(target).nextSibling.span.innerHTML;
    		return(text);
    	} else {
    		return(false);
    	}
    
    }
    Next, if you're aiming to address the span within the nextSibling, you can't simply slip in span. YOu'll need to address it via the DOM.

    e.g.
    Code:
    getElementsByTagName('span')[0]
    So, try this…
    Code:
    function sansAJAX(target) {
    
    	var cName = document.getElementById(target).nextSibling.className;
    	if (cName == 'tooltip') {
    		var text = document.getElementById(target).nextSibling.getElementsByTagName('span')[0].innerHTML;
    		return text;
    	} else {
    		return false;
    	}
    
    }
    exactly whats said above, except I don't think the code is right. don't put nexSibling in there, just:

    document.getElementById(target).getElementsByTagName('span')[0]

    or

    document.getElementById(target).getElementsByTagName('span').item(0)

    which is the correct way of referencing the DOM node in a collection.

    document.getElementById(target).nextSibling will select the text node in IE, which has no childNodes.
    Fiji Web Design - where i do Joomla Web Design
    Bucabay.com - My blog

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    As digital-ether points out, your route through the DOM may not match the route you need to take.
    Being able to see the markup would help us to point you to a solution.


    Quote Originally Posted by digital-ether View Post
    document.getElementById(target).getElementsByTagName('span').item(0)

    which is the correct way of referencing the DOM node in a collection.
    Fwiw…

    Quote Originally Posted by PPK

    item(): Access an item in an array

    document.getElementsByTagName('P').item(0)
    The same as document.getElementsByTagName('P')[0]

    Not necessary in JavaScript

    This method is meant for other programming languages where NodeLists like those returned by getElementsByTagName are not conveniently made into arrays.
    You don't need item() at all.

    (src)

  • #6
    s42
    s42 is offline
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mmm

    @digital ether
    I think that's what i'd need if i was getting a span that was the child of the element i'm getting. What i need is a sibling element.

    Thanks for the help with the class reserved thing bill poster.

    I'll try all that out when i get home... Thank you.

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by s42 View Post
    @digital ether
    I think that's what i'd need if i was getting a span that was the child of the element i'm getting. What i need is a sibling element.

    Thanks for the help with the class reserved thing bill poster.

    I'll try all that out when i get home... Thank you.
    Yes, my mistake. Do you need a sibling, or the child of the next sibling? If you still don't get it to work, posting an example HTML would make the problem clearer.

    OFFTOPIC:
    This method is meant for other programming languages where NodeLists like those returned by getElementsByTagName are not conveniently made into arrays.
    You don't need item() at all.
    I don't believe PPK made that statement in the interest of the DOM specification.

    The item() method exists because the DOM is a language independent Object Model. item() is not there just for languages that do not conveniently use an Array to represent a NodeList. (The DOM Specs makes no specification on the implementation of the DOM - that would make it language dependent)

    Accessing a nodeList as an Array is not accessing it via the DOM, it's accessing it via an Array. Its true you don't need to use item() in JavaScript, that doesn't mean item() isn't the correct way of accessing a DOM Node in a Collection.
    Fiji Web Design - where i do Joomla Web Design
    Bucabay.com - My blog

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by digital-ether View Post
    Accessing a nodeList as an Array is not accessing it via the DOM, it's accessing it via an Array. Its true you don't need to use item() in JavaScript, that doesn't mean item() isn't the correct way of accessing a DOM Node in a Collection.
    I acknowledge that. I just wanted to make clear to others that there's no technical imperative to use the items() method.
    Sometimes there are benefits to a more by-the-book approach. I just feel that this is not one of them.

    It's all good.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •