Problem with dynamic edit box script [Archive]

carlton

02-15-2007, 07:19 PM

Hey guys!

I've written a script that will make a form field appear to be regular text until it is clicked on - then it becomes editable (by becoming a textarea with the same value) - then when the user is done editing the field, it will return to being normal text. (This is hard to word, so I'm sorry if it's confusing)

Anyway, this script works fine. The problems come up when I am trying to make a function to make creating the dynamic fields a little easier. I have double checked my source code, and it seems right, but I'm still getting errors.

My source code:

<html>
<head>
<script language="javascript">
//Dynamic edit box generator
//Coded by Carlton Cook

function makeEditable(inputId,textId) //where inputId is the textbox and textId is the span
{
document.getElementById(inputId).style.display = 'inline';
document.getElementById(inputId).value = document.getElementById(textId).innerHTML;
document.getElementById(textId).style.display = 'none';
document.getElementById(inputId).focus();
}

function backToNormal(inputId,textId)
{
document.getElementById(inputId).style.display = 'none';
document.getElementById(textId).innerHTML = document.getElementById(inputId).value;
document.getElementById(textId).style.display = 'inline';
document.getElementById(inputId).style.display = 'none';
document.getElementById(inputId).blur();
}

function addEditBox(boxId,boxTitle,initValue)
{
//if (boxId="") {return;} //A box with no ID will cause havoc on the page.
//if (initValue="") {initValue=" "}; //A blank value can also cause problems selecting the box.

document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span'\");"); //Write out the initial span tag
document.write(" onMouseOut=\"backToNormal('" + boxId + "Text','" + boxId +"Span');\">" + boxTitle); //continue with the span tag...
document.write("<input type=\"text\" id=\" " + boxId + "Text\" value=\"" + initValue + "\" style=\"display: none;\"><span id=\"" + boxId + "Span\" style=\"display: inline;\">" + initValue + "</span></span><br />");

}

</script>
</head>
<body>

<script type="text/javascript">
addEditBox('myName','Name: ','Carlton');
addEditBox('myAge','Age: ','18');
</script>

</body>

These are the errors I'm getting:
(the first error is referring to the first uncommented line in addEditBox() )

Error: missing ) after argument list
Source File: file:///Z:/vcsweb%202007/graduation%20requirements/dynEdit.html
Line: 1, Column: 37
Source Code:
makeEditable('myNameText','myNameSpan'

Error: document.getElementById(inputId) has no properties
Source File: file:///Z:/vcsweb%202007/graduation%20requirements/dynEdit.html
Line: 18

This really has me stumped. I've check my source code on the first error and there is definitely a ")" in the document.write. As for the second error, I'm really not sure what is causing that.

Any help would be greatly appreciated!

Thanks,
Carlton

MikeFoster

02-15-2007, 08:06 PM

Hi carlton, Welcome to Coding Forums!

Note that you need "==" instead of "=" here:

//if (boxId=="") {return;} //A box with no ID will cause havoc on the page.
//if (initValue=="") {initValue=" "}; //A blank value can also cause problems selecting the box.

Also note my change in red here:

// document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span'\");"); //Write out the initial span tag
document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span')\""); //Write out the initial span tag