Bold Text Dynamically

**Shaun(OfTheDead)** · Oct 9, 2006, 21:45

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??

**Tyssen** · Oct 9, 2006, 21:48

You're trying to getElementById titleId, but the element you're passing in is a class, not an ID.

**Raffles** · Oct 9, 2006, 23:15

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.

**Shaun(OfTheDead)** · Oct 9, 2006, 23:25

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 !!

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.

**Tyssen** · Oct 9, 2006, 23:45

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;

**Shaun(OfTheDead)** · Oct 10, 2006, 22:28

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??

**felgall** · Oct 10, 2006, 23:47

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);}

**Shaun(OfTheDead)** · Oct 11, 2006, 06:58

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??

**jimfraser** · Oct 11, 2006, 08:01

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';}

**Shaun(OfTheDead)** · Oct 11, 2006, 12:39

Thanks, jimfraser. That was the problem.

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

The SitePoint Forums have moved.

User Tag List

Thread: Bold Text Dynamically

Thread Tools

Display

Bold Text Dynamically

Bookmarks

Bookmarks

Posting Permissions