question about javascript

[kigogu]

I'm not really sure what to put as the subject, but anyways I have this javascript that runs when i click an edit button, just calls the edit() function and what I want it to do is place an edit button next to every element that is an input, textarea, img, and label. the script itself works fine, but the html that i'm having it place the edit buttons next to is being displayed by a php function. So what i think is the problem is that the javascript wont read the html that is being displayed by the php function? since it reads the html first and finds that nothing matches or something? if this is the problem how might i go about to fix it?

 

Here is the javascript:

<script type="text/javascript">

	var count = true;

	document.getElementsByAttribute=function(attrN,attrV,multi){
		attrV=attrV.replace(/\|/g,'\\|').replace(/\[/g,'\\[').replace(/\(/g,'\\(').replace(/\+/g,'\\+').replace(/\./g,'\\.').replace(/\*/g,'\\*').replace(/\?/g,'\\?').replace(/\//g,'\\/');
		var
			multi=typeof multi!='undefined'?
				multi:
				false,
			cIterate=typeof document.all!='undefined'?
				document.all:
				document.getElementsByTagName('*'),
			aResponse=[],
			re=new RegExp(multi?
				'\\b'+attrV+'\\b':
				'^'+attrV+'$'),
			i=0,
			elm;
		while((elm=cIterate.item(i++))){
			if(re.test(elm.getAttribute(attrN)||''))
				aResponse[aResponse.length]=elm;
		}
		return aResponse;
	}

	function edit() {
		if(count)
		{
			// Get all input elements into an object
			var inputs = document.getElementsByTagName('input');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);
			}

			var inputs = document.getElementsByTagName('textarea');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);
			}

			var inputs = document.getElementsByTagName('img');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);
			}

			var inputs = document.getElementsByTagName('label');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);				
			}

			count = false;
		}

	}

	function doAlert(elementID) {
		var tag = document.getElementById(elementID);
		if(tag.tagName == 'LABEL')
		{
			window.open('editor.php?value='+ document.getElementById(elementID).innerHTML + '&id=' + elementID + '&tag=' + tag.tagName, 'popup title', 'toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=400, height=300');
		}
		else
		{
			window.open('editor.php?value=' +  document.getElementById(elementID).value + "&id=" + elementID + "&tag=" + tag.tagName, "popup title", "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300");	
		}
	}

</script>

 

basically this is the structure of my php file:

<html>
<head>
<script>
</script>
</head>
<body>
<?php
echo display_html();
?>
</body>
</html>

[Mahngiel]

PHP is a server-side language.  That means it gets created before the browser gets to see it and use javascript.  This means the problem lies elsewhere in your code.

[kigogu]

Alright so I kind of deduced that its the html that is messing it all up, when i delete everything except the content then it will work. when i encompass the data in a div tag is when the javascript doesn't work. Any thoughts on why the javascript doesn't work due to div tags?

 

Works

<html>
<body>
<input type='text' />
</body>
</html>

 

Doesn't work:

<html>
<body>
<div>
<input type='text' />
</div>
</body>
</html>

[Mahngiel]

when i encompass the data in a div tag is when the javascript doesn't work. Any thoughts on why the javascript doesn't work due to div tags?

 

Seems to be a loss of scope issue.  Your JS is likely looking for a child of body and not body>div

[kigogu]

when i encompass the data in a div tag is when the javascript doesn't work. Any thoughts on why the javascript doesn't work due to div tags?

 

Seems to be a loss of scope issue.  Your JS is likely looking for a child of body and not body>div

 

So i assume the document.body.insertBefore() has something to do with it xP would i have to keep all of the parents of the element so like

document.body.div1.div2.insertBefore()

?

if so, is there a way to get all the parents of the given input? or would there be a quicker way of going about this? lol completely new to javascript so i'm trying to learn as i go

[Mahngiel]

need more code. post the JS and the structure that works.

[kigogu]

this would be something that works

 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>

<script type="text/javascript">

	var count = true;

	document.getElementsByAttribute=function(attrN,attrV,multi){
		attrV=attrV.replace(/\|/g,'\\|').replace(/\[/g,'\\[').replace(/\(/g,'\\(').replace(/\+/g,'\\+').replace(/\./g,'\\.').replace(/\*/g,'\\*').replace(/\?/g,'\\?').replace(/\//g,'\\/');
		var
			multi=typeof multi!='undefined'?
				multi:
				false,
			cIterate=typeof document.all!='undefined'?
				document.all:
				document.getElementsByTagName('*'),
			aResponse=[],
			re=new RegExp(multi?
				'\\b'+attrV+'\\b':
				'^'+attrV+'$'),
			i=0,
			elm;
		while((elm=cIterate.item(i++))){
			if(re.test(elm.getAttribute(attrN)||''))
				aResponse[aResponse.length]=elm;
		}
		return aResponse;
	}

	function edit() {
		if(count)
		{
			// Get all input elements into an object
			var inputs = document.getElementsByTagName('input');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				var parents = inputs[i].parentNode.id;
				document.body.insertBefore(button, inputs[i]);
			}

			var inputs = document.getElementsByTagName('textarea');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);
			}

			var inputs = document.getElementsByTagName('img');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);
			}

			var inputs = document.getElementsByTagName('label');
			// Loop through inputs
			for( var i=0; i<inputs.length; i++ ) {
				// create new element to insert before
				var button = document.createElement('button');
				// Set the inner HTML of the button to 'edit'
				button.innerHTML = 'Edit';
				// Set onClick action
				button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
				// Append the button before the current input
				document.body.insertBefore(button, inputs[i]);				
			}

			count = false;
		}

	}

	function doAlert(elementID) {
		var tag = document.getElementById(elementID);
		if(tag.tagName == 'LABEL')
		{
			window.open('editor.php?value='+ document.getElementById(elementID).innerHTML + '&id=' + elementID + '&tag=' + tag.tagName, 'popup title', 'toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=400, height=300');
		}
		else
		{
			window.open('editor.php?value=' +  document.getElementById(elementID).value + "&id=" + elementID + "&tag=" + tag.tagName, "popup title", "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300");	
		}
	}

</script>
</head>
<body>
<button onclick="edit()">Edit</button><br />

<input type="radio" class="radio1" />
<textarea id="textarea">Rawer</textarea>
<img src="google.com" id="img1" />
<label id="phone">rawrrr</label>
</body>

</html>

 

but once you get to placing, say the radio button, in a div tag then that is where everything breaks

[Christian F.]

Give an ID to the element you want to manipulate, and use that ID to identify the element directly. That way you don't have to rely upon an exact structure of the page, and as a result have a much more robust script.