how do I toggle bolding text?

Hello Experts,

Please review code below.
I would like to bold the div text when clicked and want to unbold the previous one clicked (toggle).

See what I mean?

Thx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<title>JS toggle</title>
<script language="JavaScript">
 
function bold(id){
var current = "";
	if(id == "one"){
		var bold = document.getElementById(id);
		bold.style.fontWeight = "bold";
		current = id;
		
		if(current){
			var unbold = document.getElementById(current);
			unbold.style.fontWeight = "none";
		}
	}
	if(id == "two"){
		var bold = document.getElementById(id);
		bold.style.fontWeight = "bold";
		current = id;
		
		if(current){
			var unbold = document.getElementById(current);
			unbold.style.fontWeight = "none";
		}
	}
	if(id == "three"){
		var bold = document.getElementById(id);
		bold.style.fontWeight = "bold";
		current = id;
		
		if(current){
			var unbold = document.getElementById(current);
			unbold.style.fontWeight = "none";
		}
	}
}
 
</script>
</head>
 
<body>
<div id="one" onclick="bold('one'); return false; "> text </div>
<div id="two" onclick="bold('two'); return false; "> text </div>
<div id="three" onclick="bold('three'); return false; "> text </div>
</body>

Open in new window

epifanio67Asked:
Who is Participating?
 
kostyakConnect With a Mentor Commented:
epifanio67:
Here's the solution that I would go with:

Hope I did not oversimplify your code, and you get what you're looking for...
<html>
<head>
<title>JS toggle</title>
<script language="JavaScript">
var current = "";
 
function bold(obj){
	obj.style.fontWeight = 'bold';
	if(current != '') {
	    document.getElementById(current).style.fontWeight = '';
	}
	current = obj.id;
} 
</script>
</head>
 
<body>
<div id="one" onclick="bold(this); return false; "> text </div>
<div id="two" onclick="bold(this); return false; "> text </div>
<div id="three" onclick="bold(this); return false; "> text </div>
</body>

Open in new window

0
 
ncooConnect With a Mentor Commented:
You could do the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<title>JS toggle</title>
<script language="JavaScript">
 
function bold(id){
	var elem = document.getElementById(id);
	if (elem.style.fontWeight=='bold') {
		elem.style.fontWeight ='';
	} else {
		elem.style.fontWeight ='bold';
	}
}
</script>
</head>
 
<body>
<div id="one" onclick="bold('one'); return false; "> text </div>
<div id="two" onclick="bold('two'); return false; "> text </div>
<div id="three" onclick="bold('three'); return false; "> text </div>
</body>

Open in new window

0
 
epifanio67Author Commented:
Thx ncoo,

I just tested your suggestion.
When I click on div one, the text does bold. However, when I click on div two, it also bold; but it does not unbold div one.

They all bold when clicked. I want to be to have one bold text/div per click.

See what I mean?
Thx,
0
 
epifanio67Author Commented:
Excellent Kostyak... it is exactly what I was looking for....

Regards,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.