replace some parts in the document

**d-machine** · 07-15-2008, 08:56 AM

Hi

Is it possible to replace some code parts in the document, which are not recognized as Strings?

for example:
if I want to replace this part:

PHP Code:


<div class="blue">This should be red</div>

with this code:

PHP Code:


<div class="red">This should be red</div>

**rangana** · 07-15-2008, 09:06 AM

Is your end result to change the class name to blue when it's red and vice-versa? If so, you might find this basic example useful:

Code:

<script type="text/javascript">
window.onload=function()
{
var mydivs=document.getElementsByTagName('div');
for(var i=0;i<mydivs.length;i++)
{if(mydivs[i].className=='blue'||mydivs[i].className=='red')
	{mydivs[i].onclick=function()
		{this.className=(this.className!='blue')?'blue':'red';}
	}}}
</script><div class="blue">This should be red</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="blue">This should be red</div>

Hope it keeps you going.

**d-machine** · 07-15-2008, 09:14 AM

Hi

thank you very much.

I changed the onclick to onload

do you know why isn't it working?

**rangana** · 07-15-2008, 09:40 AM

Not working? It is. I tested the code on IE, FF, Safari and Opera and thus works identical. Try to alert the className:

Code:

<script type="text/javascript">
window.onload=function()
{
var mydivs=document.getElementsByTagName('div');
for(var i=0;i<mydivs.length;i++)
{if(mydivs[i].className=='blue'||mydivs[i].className=='red')
	{mydivs[i].onclick=function()
		{this.className=(this.className!='blue')?'blue':'red';
		alert(this.className);}
	}}}
</script>
<div class="blue">This should be red</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="blue">This should be red</div>

**d-machine** · 07-15-2008, 10:24 AM

I know that in this way it is working

But I don't need this action to happen onmouseclick, only on page load

so I've tried to change the onclick to onload but it isn't working..

**rangana** · 07-15-2008, 10:48 AM

Change to:

Code:

window.onload=function()
{
var mydivs=document.getElementsByTagName('div');
for(var i=0;i<mydivs.length;i++)
{if(mydivs[i].className=='blue'||mydivs[i].className=='red')
this.className=(this.className!='blue')?'blue':'red';}}

**d-machine** · 07-15-2008, 10:58 AM

I really appreciate your help,
but it is not working (I've checked it on FF and on IE).

**rangana** · 07-15-2008, 11:06 AM

Then we're not looking on the same script. Up your modification so we could fiddle on it.

**codeexploiter** · 07-15-2008, 11:10 AM

Check the following code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">
		.blue{
			width:100px;
			height:100px;
			border:1px solid blue;
			margin-bottom:5px;
			color:blue;
			font-family:Verdana;
			font-size:11px;
		}
		.red{
			width:100px;
			height:100px;
			border:1px solid red;
			margin-bottom:5px;
			color:red;
			font-family:Verdana;
			font-size:11px;
		}
		.one{
			width:100px;
			height:50px;
			border:1px solid green;
			margin-bottom:5px;
			color:gray;
			font-family:Verdana;
			font-size:11px;
		}
		</style>
		<script type="text/javascript">
		function getElementsByClass(searchClass, node, tag){
				var classElements = new Array();
				if (node == null) 
					node = document;
				if (tag == null) 
					tag = '*';
				var els = node.getElementsByTagName(tag);
				var elsLen = els.length;
				var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
				for (i = 0, j = 0; i < elsLen; i++) {
					if (pattern.test(els[i].className)) {
						classElements[j] = els[i];
						j++;
					}
				}
				return classElements;
			}
				
		window.onload = function(){
			var els = getElementsByClass('blue',null,null);
			for(var i = 0; i < els.length; i++){
				els[i].className = 'red'	;
			}			
		}
		
		</script>
	</head>
	<body>
		<div class="one">Class used is one</div>
		<div class="one">Class used is one</div>
		<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
		<div class="one">Class used is one</div>
		<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
		<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
		<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
	</body>
</html>

Is this what you are looking for?

The getElementsByClassName function was developed by Dustin Diaz.

Let me know if this is what you are looking for.

**d-machine** · 07-15-2008, 11:43 AM

Originally Posted by rangana

Then we're not looking on the same script. Up your modification so we could fiddle on it.

Thank you very much, I still don't know why isn't it working

anyway as I said I really appreciate you help! maybe I did something worng

The code of codeexploiter is working perfect!
Thank you very very much !!

Just a question: if hypothetically, I have some dives that I need that will stay blue as they are, and I cannot define them special id/class is there a way to get those dives not by class, only by the text in them?