asked on

how to implement a javascript variable

Hi. I'm new to javascript and have what I think is a simple question. I wrote a javascript to change an image next to an input field depending on whether the input is changed to null or filled in. It works find for one input field, but I have thirty input fields and would like to not write thirty functions. How can I use a variable instead of the document name? My code is below along with the calling snippet.

<SCRIPT Language="JavaScript">
    <!-- 
	
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

    function chgpic(pic1,cname,topv)
    { 

	document.dg.docTitle.value = document.dg.docTitle.value.trim();	
	var j = document.dg.docTitle.value.length;
    	if((j)<1)
        {
			document.getElementById("pic1").src="redlight2.gif";
        	return false;
        }
		else if((j)>1)
		{
			document.getElementById("pic1").src="g1.gif";
			return false;
		}
    }
    -->
</SCRIPT>


calling snippet


 	<tr><cfoutput>
		<td width="160" align="left" valign="top"><font face="Arial,Helvetica" size="-1" color="FF0000"><b><font color="black"><cfif len(trim(frm_item_doc_title))><img 

src="g1.gif" id="pic1" border="0" alt=""><cfelse><img src="redlight2.gif" border="0" 

id="pic1" alt=""></cfif> Title:</font></b></font></td>
		<td width="418" align="left" valign="top"><textarea cols="50" rows="2" onchange="return chgpic(pic1,this.name,this.value);" wrap="physical" 

name="docTitle">#docTitle#</textarea></td>
	</tr>	
	<tr>

Open in new window

askurat1

Why would you need to write 30 functions?

askurat1

I mean if you wanted to write a variable it would just be:

var pic1

Open in new window

HainKurt

here it is:

(ask if you do not understand it) basically, we give diffrent id s to images (use one image and control the src element with <cfif>...<cfelse>...</cfif>) like pic1,pic2...

and call

onchange="chgpic('2',this);"

on textarea on change event... pass this (textarea) and number 1 for Pic1, 2 for Pic2 etc... give it a try...

<SCRIPT Language="JavaScript">
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

function chgpic(imgID,txt){ 
	document.getElementById(imgID).src = (txt.value.trim().length > 0) ? "g1.gif" : "redlight2.gif";
}
</SCRIPT>

...
 	<tr><cfoutput>
		<td>
			<img src="<cfif len(trim(frm_item_doc_title))>g1.gif<cfelse>redlight2.gif</cfif>" id="pic1" border="0" alt=""> Title:
		</td>
		<td width="418" align="left" valign="top">
			<textarea cols="50" rows="2" onchange="chgpic('1',this);" wrap="physical" name="docTitle">#docTitle#</textarea>
		</td>
	</tr>	

 	<tr><cfoutput>
		<td>
			<img src="<cfif len(trim(frm_item_doc_title))>g1.gif<cfelse>redlight2.gif</cfif>" id="pic2" border="0" alt=""> Title:
		</td>
		<td width="418" align="left" valign="top">
			<textarea cols="50" rows="2" onchange="chgpic('2',this);" wrap="physical" name="docTitle">#docTitle#</textarea>
		</td>
	</tr>	
...

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

curtis247

ASKER

If you are sending "pic2" to the function variable imgNo, wouldn't "pic" + imgNo result in picpic2?

curtis247

ASKER

HainKurt

I changed your input snippet and it worked. Thanks for your help and quick response.

onchange="return chgimage('1',this);"


<SCRIPT Language="JavaScript">
    <!-- 
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
function chgimage(imgNo,txt){ 

      document.getElementById("pic"+imgNo).src = (txt.value.trim().length > 0) ? "g1.gif" : "redlight2.gif";
}
    -->
</SCRIPT>

Open in new window