calabiyau Posted November 18, 2007 Share Posted November 18, 2007 Trying to create a javascript color picker to populate a text field for CMS. On clicking the box to open color picker calls a js function that is supposed to create an outer div to hold the colors together and then small inner divs each with a background color. Clicking on the color sends the value to the text field. I've got it working to a point. Generates all the divs, but i am trying to use attachEvent (I know it's only IE for now) on the divs to allow them to be clickable and call the function to poplulate the text field. No matter which color is clicked, it always populate the text field with the value of the very last color div to be created. Hopefully a js expert can help me understand what's going on here. I generally just muddle my way through js without really totally understanding how the objects and things relate to each other. Should mention that I tried using an array when looping through the colors, as I though maybe it was being overwritten by using single variable. It's like the function part of attachEvent can't be applied to multiple elements. Sorry if my terminology is not correct. Like I said I usually just muddle through. Thanks for any help. <html> <head> <script type="text/javascript"> function getColors() { //alert("inside the array function"); masterColors = new Array(); masterColors[0] = "ffffff"; masterColors[1] = "000000"; masterColors[2] = "00667f"; return masterColors; } function Test(selected_color) { alert (selected_color); document.getElementById('boxborder').value = selected_color; document.getElementById('select').style.background = selected_color; } function openColors(field_id) { //alert ("inside the function"); colorArray = new Array(); colorArray = getColors(); //document.write(colorArray); var newElement = document.createElement("div"); document.body.appendChild(newElement); newElement.style.width = 200; newElement.style.height = 200; newElement.style.background = "gray"; newElement.style.position = "absolute"; newElement.style.left = 200; newElement.style.top = 200; newElement.id = "div1"; newElementB = new Array(); for (x=0; x<colorArray.length; x++) { currentColor = colorArray[x]; newElementB[x] = document.createElement("div"); newElementB[x].style.width = 20; newElementB[x].style.height = 20; newElementB[x].style.background = "gray"; newElementB[x].style.position = "absolute"; newElementB[x].style.left = 200 + (20*x); newElementB[x].style.top = 200; newElementB[x].style.background = colorArray[x]; newElementB[x].id = x; document.body.appendChild(newElementB[x]); //newElement.appendChild(newElementB[x]); newElementB[x].attachEvent("onclick",function() {Test(currentColor)}); } } </script> </head> <body> <a href="#" onclick="openColors('boxborder');"> <div id="select" name="select" style="width: 20px; height: 20px; border: 1px solid black;"> </div> </a> <form method="post" action="js-test.htm"> <input type="text" name="boxborder" id="boxborder" value="000000"/> <input type="submit" value="SAVE CHANGES"/> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.