Javascript array and loop issue.

The attached script is from a utility I bought called ColorPickerPro.  It works great in assigning a color to a single DOM object.  However, I want to use one script to assign a single color to multiple objects.  In the attached example I am assigning the color to ElementById('sbArtTitle').  I also want to assign the same color to  ElementById('tocArtTitle'), and ElementById('mainArtTitle').  

I think I can do this by creating an array of the Elements and then use a for loop to loop through each element and assigning the color. I am new to JavaScript. Can someone give me some guidance on how to do this, or some other solution to this problem.
<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>

Open in new window

edfmAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OnthraxCommented:
First you'll need to set up your array.

var myArray=new Array();
 myArray[0]="sbArtTitle";
 myArray[1]="tocArtTitle";
 myArray[2]="mainArtTitle";

Then we'll loop through it and execute whatever you wish.

for (i=0;i<myArray.length;i++) {
    document.getElementById(myArray[i]).style.borderColor = "#ffffff";
}

That's it.

Hope this helps...
0
edfmAuthor Commented:
Thanks for your suggestion, however, I am unable to make it work.   Let me give you a little more info.  

First I have attached readme.pdf which has the instructions for the Colorpickerpro program.  

Second, on the www.colorprickerpro.com website FAQs page they state:

Can a single color picker update multiple DOM objects on a page?
Yes. You can have a single color picker update any number of DOM objects when the user selects a color. For example, when a user selects a color from the color picker, the color could be immediately applied to the page background color, text colors, etc.

However, they don't give instructions on how to accomplish this.  Unfortunately, they haven't responded to repeated requests for assistance via email, and don't provide a phone number.  

The statement above leads me to believe that I should be able to assign multiple DOM objects to the "var DOMo" in the following script, and then have it the chosen color applied to the DOMo parameter in the colorpickerpro_v1 script on line three.

Any ideas on how that could be accomplished?


<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>

Open in new window

readme.pdf
0
OnthraxCommented:
Hmm I'm not sure how this actually works and the colorpickerpro website is down.

I have read the pdf you attached, but I do not see how a new collor gets attached to anything, so I cannot explain how to add multiple objects.

Am I correct in assuming the DOMo variable is not only sent but also replaced by the new color?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

edfmAuthor Commented:
I just checked the colorpickerpro website and it seems to be working now at http://www.colorpickerpro.com/.

I hesitate of post the entire colorpickerpro1.js file since is is copyrighted, but I am attaching a couple of functions that seem to be the most pertinent. Maybe this will help you make some sense of this.

I appreciate your assistance.


function colorpickerpro_v1(FormName, TextFieldName, ElementNumber, ShowPoundSign, DefaultColor, AutoHideDropDowns, TextFieldClass, totalCountOnPage, ApplyToDOM) {
	//alert('colorpickerpro_v1');
	if (arguments.length != 9 ) {alert("Sorry, there are not enough parameters being passed.");return false;}
	var cp_formName = FormName;
	var cp_textFieldName = TextFieldName;
	var cp_elementNumber = ElementNumber;
	var cp_showPoundSign = ShowPoundSign;
	var cp_defaultColor = DefaultColor;
	var cp_autoHideDropDowns = AutoHideDropDowns;
	var cp_textFieldClass = TextFieldClass;
	var cp_applyToDOM = ApplyToDOM;
	var cp_totalCountOnPage = totalCountOnPage; // How many total color pickers will be on the page. Helps to speed up loops	
	ezcolorpicker_build(cp_elementNumber, cp_textFieldName, cp_autoHideDropDowns, cp_formName, cp_showPoundSign, cp_defaultColor, cp_applyToDOM, cp_totalCountOnPage, cp_textFieldClass);
}
 
 
function colorPick(oid, color, oInput, autoHide, oForm, showPound, oDOM) {
	if (autoHide == "yes") {
		autoHideDropDowns('show', oForm); // show form other form drop-downs
	}
	if (oDOM.length) {
		oDOM = unescape(oDOM) + '="#' + color + '"' // unescape is necessary because the oDOM was escaped
		eval(oDOM); // apply color to any object: document.myform.myinput.style.backgroundColor
	}
	document.getElementById('ezColorPickerIconArea' + oid).style.backgroundColor = "#" + color;
	document.getElementById('ezColorPickerTransitionArea' + oid).style.backgroundColor = color;
	document.getElementById('ezColorPickerTable' + oid).style.display = 'none';
	document.getElementById('ezColorPickerTable' + oid).style.visibility = 'hidden';
	if (showPound == "yes") {
		document.getElementById(oInput).value = "#" + color;
	} else {
		document.getElementById(oInput).value = color;
	}	
}
function colorChanger(oid, color) {
	document.getElementById('ezColorPickerCodeValueArea' + oid).innerHTML = color;
	document.getElementById('ezColorPickerTransitionArea' + oid).style.backgroundColor = color;
}

Open in new window

0
OnthraxCommented:
Yes this is helpful. Could you post the code where the colorPick function is being called. I need this to asses if the function is just called once, or perhaps part of a loop to change multiple DOM objects.
0
edfmAuthor Commented:
This colorPick function is called as a part of the colorpickerpro_v1.js which is call in the original code that I posted.


<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>
<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>

Open in new window

0
OnthraxCommented:
I am referring to the colorPick function not the colorpickerpro_v1 function. (The second function you copy / pasted three posts above)
0
edfmAuthor Commented:
See Line 26 in the attached code.  I think this is what you're looking for.
function ezcolorpicker_build(oid, oInput, autoHide, oForm, showPound, defaultColor, oDOM, oTotalCount, oClass) {
	//alert("ezcolorpicker_build");
	//alert("oid: " + oid);
	//alert("oInput: " + oInput);
	//alert("autoHide: " +autoHide);
	//alert("oForm: " + oForm);
	//alert("showPound: " + showPound);
	//alert(defaultColor);
	//alert(oDOM);
	//alert(oClass);
	if (showPound == "yes") {pound = '#';} else {pound = '';} // pound: for # sign. showPound: for yes and no stings.
	var cc=0;
	document.write('<div class="ezColorPickerInput" id="ezColorPickerInput' + oid + '"><input name="' + oInput + '" type="text" size="7" maxlength="7" id="' + oInput + '" value="' + pound + defaultColor + '" class="' + oClass + '" /></div>');
	document.write('<div class="ezColorPickerIconArea" id="ezColorPickerIconArea' + oid + '" onclick="javascript:ezColorPickerToggle(' + oid + ', \'' + oInput + '\', \'' + autoHide + '\', \'' + oForm + '\', \'' + oTotalCount + '\')"><img src="ezcolorpickericon.gif" alt="click to select color" width="21" height="20" border="0" align="absmiddle" id="ezColorPickerImage" /></div>');
	document.write('<table class="ezColorPickerTable" id="ezColorPickerTable' + oid + '" border="0" align="center" cellpadding="0" cellspacing="1" style="position:absolute;display:none;visibility:hidden;z-index:0">');
	document.write('<tr><td bgcolor="#ECE9D8" colspan="21" height="24">');
	document.write('<div class="ezColorPickerTransitionArea" id="ezColorPickerTransitionArea' + oid + '">&nbsp;</div>');
	document.write('<div class="ezColorPickerCodeValueArea" id="ezColorPickerCodeValueArea' + oid + '"></div><div class="ezColorPickerCodeValueArea"><font color="#ECE9D8">ezColorPicker</font></div>');
	document.write('<div class="ezColorPickerClose" onclick="javascript:ezColorPickerClose(' + oid + ', \'' + oInput + '\', \'' + autoHide + '\', \'' + oForm + '\', \'' + oDOM + '\');">x</div>');
	document.write('</td></tr>');
	// start table row
	for (var i=0; i < 12; i++) {
	document.write('<tr>');
	// create tale cell
	for (var td=0; td < 21; td++) { 
	document.write('<td class="ezColorPickerTableTD" width="7" height="7" bgcolor=#' + strCode[cc] + ' onclick="javascript:colorPick(' + oid + ', \'' + strCode[cc] + '\', \'' + oInput + '\', \'' + autoHide + '\', \'' + oForm + '\', \'' + showPound + '\', \'' + oDOM + '\')" onmouseover="javascript:colorChanger(' + oid + ', \'#' + strCode[cc] + '\')"><img src="ezcolorpickertrans.gif" width="7" height="7"></td>'); // trans image is for Opera fix 
		cc++;
	}
	document.write('</tr>');
	}
	document.write('</table>');
	// if default value was given change color in icon area to that color
	var stripOut = /#/g; // regEx to strip out any pound signs (#)
	var thisColor = defaultColor
	if (thisColor.length >= 6) { 
		document.getElementById('ezColorPickerIconArea' + oid).style.backgroundColor="#" + thisColor.replace(stripOut, '');
	}
}

Open in new window

0
OnthraxCommented:
Yes that's what I required. As the script shows, the oInput/oDOM variables are not an array but a single variable, so you cannot use this to adjust multiple DOM objects at the same time.

I guess the only thing to do is keep writing the vendor to request a multi-dom feature, or write it yourself (but I guess that is not an option otherwise you would not have opened this thread)..

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
edfmAuthor Commented:
Thanks for your help on this.  I will attempt to contact the vendor via snail mail.  I will award you points anyway as there doesn't seem to be a viable solution, and I appreciate the time you spent on this.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.