SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)

    Bold Text Dynamically

    Hello.

    I'm trying to dynamically bold some text with javaScript. I keep getting that my "element has no properties", though.


    Code:
    document.getElementById(titleId).style.fontWeight='bold';
    Here's the mark up...
    HTML Code:
    <dl>
    	<dt id="List1Title">
    		<a href="#" onclick="toggleECList('List1'); return false;" class="ListTitles">Marsha Bhagwansingh</a>
    	</dt>
    	<dd class="List1"><a href="#">Item One Heading One</a></dd>
    	<dd class="List1"><a href="#">Item Two Heading One</a></dd>
    </dl>
    I don't know... it seems right to me. Does anyone spot anything weird??

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're trying to getElementById titleId, but the element you're passing in is a class, not an ID.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also, titleId ought to be in in inverted commas, i.e. 'titleId'. And there is nothing (not even a class) called titleId.

    And I'd recommend making all your javascript unobtrusive by putting it in your <head> instead of using the inline onclick, onmouseover and friends.

  4. #4
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    Also, titleId ought to be in in inverted commas, i.e. 'titleId'. And there is nothing (not even a class) called titleId.
    eek. Nah I guess I should have posted the rest.

    "titleId" was a variable that came from another function. The value of the variable would have been "List1Title"... which is the id of the <dt>.

    Actually it's a good thing you guys made me check that, though... because I figured out my problem... I had a typo...
    :S

    Anyways it works now... thank god !!

    Quote Originally Posted by Raffles
    And I'd recommend making all your javascript unobtrusive by putting it in your <head> instead of using the inline onclick, onmouseover and friends.
    But as long as I'm here wasting web-space, you mentioned that thing about getting rid of the onclick, onmouseover, etc. events and putting all the javaScript in the head... Could I bother you to give me an example of how that'd work?? I'd really appreciate it.

    Thanks again, dudes.


    Off Topic:

    Yeah I'm famous for givng up... posting stuff on SitePoint... and then later noticing some dumb mistake I made. Bare wtih me.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An example would be something like this:

    Code:
    function yourFunction() {
    	var yourID = document.getElementById("yourID");
    	yourID.onmouseover=function() { this.style.fontWeight='bold';}
    	yourID.onmouseout=function() { this.style.fontWeight='normal';}
    	yourID.onfocus=function() { this.style.fontWeight='bold';}
     	yourID.onblur=function() { this.style.fontWeight='normal';}
    }
    window.onload=yourFunction;

  6. #6
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hey.

    Thanks a lot for that tip, Tyssen & Raffles... I never knew that was possible.

    I'm trying to take that one step higher as you'll see below...

    Code:
    <head>
    	<script type="text/javascript">
    		function boldIt()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			j=arrayReturn.length;
    
    			for(i=0; i<j; i++)
    				{
    				var arraySelect=arrayReturn[i];
    				arraySelect.onclick=alert(arraySelect);
    				arraySelect.onclick=function() {this.style.fontWeight='bold';}
    				}
    			}
    		window.onload=boldIt;
    	</script>
    </head>
    
    <body>
    	<dl>
    		<dt><a href="#">Click Here</a></dt>
    		<dd>Item One</dd>
    		<dd>Item Two</dd>
    
    		<dt><a href="#">Click Here</a></dt>
    		<dd>Item Three</dd>
    		<dd>Item Four</dd>
    	</dl>
    </bold>
    ...This works well to make the text bold.

    My problem is with that line I highlighted in red. Even though I have that alert set to activate onClick of a <dt>, it actually alerts when the window loads. It alerts twice as well... once for each <dt>.

    Why would that happen??

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You are telling it to run the alert immediately and to run whatever the alert returns onload. Change it to like this:

    arraySelect.onclick=function() {alert(arraySelect);}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hi. I just tried it. There is no alert at all now... not onLoad nor onClick.

    I also tried...


    Code:
    arraySelect.onclick=function() {alert('Hello World');}
    ...with the same result. No errors, but no alert either.

    Any ideas??

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You define the onclick in this line:
    arraySelect.onclick=function() {alert('Hello World');}

    and then you overwrite it here:
    arraySelect.onclick=function() {this.style.fontWeight='bold';}

    Maybe what you need is:
    arraySelect.onclick=function() {alert('Hello World');this.style.fontWeight='bold';}

  10. #10
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Thanks, jimfraser. That was the problem.

    ha... So I just learned something.
    :P


Bookmarks

Posting Permissions

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