SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: Bold Text Dynamically
-
Oct 9, 2006, 21:45 #1
- 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';
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>
-
Oct 9, 2006, 21:48 #2
- 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.
-
Oct 9, 2006, 23:15 #3
- 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.
-
Oct 9, 2006, 23:25 #4
- Join Date
- Nov 2005
- Location
- Trinidad
- Posts
- 3,746
- Mentioned
- 45 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Raffles
"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 !!
Originally Posted by Raffles
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.
-
Oct 9, 2006, 23:45 #5
- 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;
-
Oct 10, 2006, 22:28 #6
- 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>
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??
-
Oct 10, 2006, 23:47 #7
- 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="^$">
-
Oct 11, 2006, 06:58 #8
- 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');}
Any ideas??
-
Oct 11, 2006, 08:01 #9
- 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';}
-
Oct 11, 2006, 12:39 #10
- 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