Change DIV contents

**Marvillas1** · 11-20-2007, 06:40 PM

Hi,
I Need help changing the content of 4 DIV with with a click on a link.
This is the script I'm using:

Code:

<script type="text/javascript">
function changeContent(id,shtml) {
   if (document.getElementById || document.all) {
      var el = document.getElementById? document.getElementById(id): document.all[id];
      if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
   }
}

var msg1 = "message1";
var msg2 = "message2";
var msg3 = "message3";
var msg4 = "message4";
</script>

I know how to change the content of a single DIV:

Code:

<a href="javascript:;" onclick="changeContent ('first',msg1)">click here</a>
<div id="first">text to be changed</div>
<div id="second">more text to be changed</div>
<div id="third">some more text to be changed</div>
<div id="fourth">even more text to be changed</div>

How do I extend this to function on the 4 DIV with a click on click here.

Thanks
Marvillas1

**codeexploiter** · 11-21-2007, 05:38 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Test Document</title>
		<style type="text/css"></style>
		<script type="text/javascript">
			var newContent = ['Message One','Message Two','Message Three','Message Four'];
			function changeContent(idstr) {
				var ids = idstr.split(',');
				for(var i = 0; i < ids.length; i++){
					document.getElementById(ids[i]).innerHTML = newContent[i];
				}
			}
		</script>
	</head>
	<body>
		<div>
			<a href="javascript:;" onclick="changeContent ('first,second,third,fourth');">click here</a>
			<div id="first">text to be changed</div>
			<div id="second">more text to be changed</div>
			<div id="third">some more text to be changed</div>
			<div id="fourth">even more text to be changed</div>
		</div>
	</body>
</html>

Thread: Change DIV contents

Thread Tools

Search Thread

Change DIV contents

Bookmarks

Bookmarks

Posting Permissions