help targeting <li> with javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • jonbridgman
    New Member
    • Mar 2011
    • 7

    help targeting <li> with javascript

    I'm going through the WC3 javascript and DOM tutorials and stuck how some of this applies to <ul>'s

    can someone tell me why this doesn't change the first <li> to bold? I'd like to be able to target specific <li>'s and make them bold or change the font-face.

    Code:
    <html>
    <head>
    <SCRIPT type="text/javascript">
    
    function ChangeText(){
    document.getElementById("findMe").firstChild.style.fontWeight="bold";
    }
    
    </SCRIPT>
    </head>
    <body>
    
    <input type="button" onclick="ChangeText()" value="Change text" />
    <div >
    		<ul id="findMe">
    				<li>A.	 Introduction</li>
    				<li>A.	1 Upland and Terrestrial Ecosystems</li>
    				<li>A.2 Freshwater Ecosystems</li>
    				<li>A.3 Marine and Marine Nearshore Ecosystems</li>
    				<li>A.4 Improve Protection Tools</li>
    				<li>A.5 Science Related Strategies and Actions</li>
    		</ul>
    </div>
    </body>
    </html>
    Last edited by Dormilich; Mar 9 '11, 10:18 PM. Reason: please use [CODE] [/CODE] tags when posting code
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    It works for me. Did you make sure your browser wasn't blocking it? Especially if you're running it locally.

    Comment

    • jonbridgman
      New Member
      • Mar 2011
      • 7

      #3
      huh.

      tried posting it to the server and it still doesn't work for me.



      I can change the fontWeight for the entire <ul> if I take out "firstChild "so I'm assuming my browser (firefox) isn't blocking it.

      thanks for the reply!

      Comment

      • jonbridgman
        New Member
        • Mar 2011
        • 7

        #4
        seems to work in IE, but not safari, chrome or firefox. can anyone suggest alternative approach?

        Comment

        • Rabbit
          Recognized Expert MVP
          • Jan 2007
          • 12517

          #5
          Try using document.getEle mentById("findM e").childNod es[0].style.fontWeig ht="bold";
          Last edited by Dormilich; Mar 9 '11, 10:19 PM. Reason: fixing error

          Comment

          • jonbridgman
            New Member
            • Mar 2011
            • 7

            #6
            thanks! I think the nature of this problem is a mac issue. Searching on "javascript problems with a mac" I see a ton of frustrated coders. Tried your alternative and it doesn't work. Should I throw my mac out the window?

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694

              #7
              IE and W3C are of different opinion what Node.firstChild is, for IE it’s the first Element node, for DOM it’s the first Node (Text, Comment, Element, etc.). thus: Node.childNodes[0] (IE) = Node.children[0] (DOM-3)

              Comment

              • jonbridgman
                New Member
                • Mar 2011
                • 7

                #8
                it works!

                That slurping sound you just heard was me kissing the monitor. Thank you, Thank you, Thank you.

                Comment

                Working...