Log in

View Full Version : 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:


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

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