Javascript Works First Times Error Second Time

[Joe34]

This function executes the first time correctly, but the next time the function returns an error.

function edit_div(id)
{
    if(edit_status == 0)
    {
        document.getElementById("addnew").innerHTML = '<form><h5>Move</h5>Top Margin: <input type="text" id="topmargin"></br>Left Margin: <input type="text" id="leftmargin"></br><h5>Backgorund</h5>Background Color: <input type="text" id="backgroundcolor"></br><h5>Border</h5>Border Width: <input type="text" id="borderwidth"></br>Border Type: <input type="text" id="bordertype"></br>Border Color: <input type="text" id="bordercolor"></br><input type="button" value="Edit Div" onclick="edit_div('+id+');"></form>';
        edit_status = 1;
    }
    else
    {
        var Top = document.getElementById("topmargin").value;
        var Left = document.getElementById("leftmargin").value;
        var Background_Color = document.getElementById("backgroundcolor").value;
        var Border_Width = document.getElementById("borderwidth").value;
        var Border_Type = document.getElementById("bordertype").value;
        var Border_Color = document.getElementById("bordercolor").value;
        var num = id;
        var new_id = "a"+num;
        var b_id = "b"+num;
        
        document.getElementById(new_id).style.top = Top;
        document.getElementById(new_id).style.left = Left;
        document.getElementById(new_id).style.backgroundColor = Background_Color;
        document.getElementById(new_id).style.border = Border_Width+" "+Border_Type+" "+Border_Color;
        
        g_code = document.getElementById(b_id).innerHTML; //ERROR HERE ERROR HERE ERROR
        
        css_graphic[id] = g_code;
        
        
        //-------
        
        
        document.getElementById(new_id).removeAttribute("onClick");
        
        b_code = document.getElementById(b_id).innerHTML;
        
        css_code[id] = b_code;
        
        edit_status = 0;
        document.getElementById("addnew").innerHTML = '';
        
        edit_css()
    }
}

As you can see I have the error marked with some comment //error here error here

Error: Uncaught TypeError: Cannot read property 'innerHTML' of null

The code executes perfectly fine the first time through after displaying the form, then submitting the form it works perfectly, but when you display the form again and click submit the code will come up with an error :(:@:sad:

[urtrivedi]

where is rest html code

[Joe34]

Here it is...

<div onclick="edit_div(1);" id="a1" style="height: 200px; width: 200px; border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; border-bottom-right-radius: 10px 10px; border-bottom-left-radius: 10px 10px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; position: absolute; background-color: red; "></div>

[Joe34]

Okay ignore that...

var Top = document.getElementById("topmargin").value;
        var Left = document.getElementById("leftmargin").value;
        var Background_Color = document.getElementById("backgroundcolor").value;
        var Border_Width = document.getElementById("borderwidth").value;
        var Border_Type = document.getElementById("bordertype").value;
        var Border_Color = document.getElementById("bordercolor").value;
        var num = id;
        var new_id = "a"+num;
        var b_id = "b"+num;
        
        document.getElementById(new_id).style.top = Top;
        document.getElementById(new_id).style.left = Left;
        document.getElementById(new_id).style.backgroundColor = Background_Color;
        document.getElementById(new_id).style.border = Border_Width+" "+Border_Type+" "+Border_Color;
        
        g_code = document.getElementById(b_id).innerHTML;
        
        css_graphic[id] = g_code;
        
        
        //-------
        
        
        document.getElementById(new_id).removeAttribute("onClick");
        
        b_code = document.getElementById(b_id).innerHTML;
        
        css_code[id] = b_code;
        
        edit_status = 0;
        document.getElementById("addnew").innerHTML = '';
        
        edit_css();

The first time this code goes through the b_id element gets deleted???? Then when the code goes through again it comes up as an error.

[Airshow]

Joe,

I think you just need a some safety conditions to avoid errors.

Personally I would write the code something like this:

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

<script type='text/javascript'>
var currentId;
function edit_div(id){
	var addnew = document.getElementById("addnew");
	if(addnew){
		addnew.style.display = 'block';
		currentId = id;
	}
}

onload = function(){
	var addnew = document.getElementById("addnew");
	var addnewSubmit = document.getElementById('addnewSubmit');
	if(addnewSubmit){
		addnewSubmit.onclick = function(){
			var el_a = document.getElementById("a" + currentId);
			var el_b = document.getElementById("b" + currentId);
			if(el_a){
				el_a.style.top = this.form.topmargin.value;
				el_a.style.left = this.form.leftmargin.value;
				el_a.style.backgroundColor = this.form.backgroundcolor.value;
				if(this.form.borderwidth && this.form.bordertype && this.form.bordercolor){
					var Border_Width = this.form.borderwidth.value;
					var Border_Type  = this.form.bordertype.value;
					var Border_Color = this.form.bordercolor.value;
					el_a.style.border = [Border_Width, Border_Type, Border_Color].join(' ');
				}
				el_a.onclick = null;
			}
			if(el_b){
				css_graphic[currentId] = el_b.innerHTML;
				css_code[currentId]    = el_b.innerHTML;
			}
			if(addnew){
				addnew.style.display = 'none';
			}
			edit_css();
		};
	}
};
</script>
</head>

<body>

<div id="addnew" style="display:none;">
	<form>
	<h5>Move</h5>
	Top Margin: <input type="text" name="topmargin" /></br>
	Left Margin: <input type="text" name="leftmargin" /></br>
	<h5>Backgorund</h5>
	Background Color: <input type="text" name="backgroundcolor" /></br>
	<h5>Border</h5>
	Border Width: <input type="text" name="borderwidth" /></br>
	Border Type: <input type="text" name="bordertype" /></br>
	Border Color: <input type="text" name="bordercolor" /></br>
	<input id="addnewSubmit" type="button" value="Edit Div" />
	</form>
</div>

</body>
</html>

(untested)

Apart from the safety, the main difference is to hard-code the form in HTML and to show it each time it's needed rather than regenerate it repeatedly (which is inefficient).

Airshow