Projects11

2 Responses to “How to change a Javascript File (.js file) with external values?”

1. dhvrm Says:
   November 12th, 2009 at 5:17 am

   You need to know the variable in the external JS file that holds the background color. That variable needs to have global scope.

   Assuming you properly identify the variable with global scope that holds the value, then you can simply reassign its value inb your JavaScript.

   You then need to ensure no other functions or statements in the external JS file reassign the value to the background color variable.
   References :

2. Einstein Says:
   November 12th, 2009 at 5:55 am

   <!– Paste this code into an external JavaScript file named: colorChange.js –>

   /* This script and many more are available free online at
   The JavaScript Source :: http://javascript.internet.com

   var sixteen;
   var one;
   var red;
   var green;
   var blue;
   var colorCode;
   var inputType = "dec";

   var ralpha = "0123456789ABCDEF";
   var temppos;
   var rnumber;
   hexArray = new Array();
   hexArray[0] = "0";
   hexArray[1] = "1";
   hexArray[2] = "2";
   hexArray[3] = "3";
   hexArray[4] = "4";
   hexArray[5] = "5";
   hexArray[6] = "6";
   hexArray[7] = "7";
   hexArray[8] = "8";
   hexArray[9] = "9";
   hexArray[10] = "A";
   hexArray[11] = "B";
   hexArray[12] = "C";
   hexArray[13] = "D";
   hexArray[14] = "E";
   hexArray[15] = "F";

   rhexArray = new Array();
   rhexArray[0] = "F";
   rhexArray[1] = "E";
   rhexArray[2] = "D";
   rhexArray[3] = "C";
   rhexArray[4] = "B";
   rhexArray[5] = "A";
   rhexArray[6] = "9";
   rhexArray[7] = "8";
   rhexArray[8] = "7";
   rhexArray[9] = "6";
   rhexArray[10] = "5";
   rhexArray[11] = "4";
   rhexArray[12] = "3";
   rhexArray[13] = "2";
   rhexArray[14] = "1";
   rhexArray[15] = "0";

   function d2h(number) { //converts a decimal number to hexadecimal
   sixteen = Math.floor(number/16); //value in the 16s position
   one = Math.floor(number-(sixteen*16)); //value in the 1s position
   sixteen = hexArray[sixteen]; //hex representation of the value in the 16s position
   one = hexArray[one]; //hex respresentation of the value in the 1s position
   number = sixteen + one; //concatenate string values of hex digits
   return number;
   }

   function h2d(number) { //converts hexadecimal numbers to decimal equivalents
   if(number.substring(0,1) == "F") {
   sixteen = 15;
   } else if(number.substring(0,1) == "E") {
   sixteen = 14;
   } else if(number.substring(0,1) == "D") {
   sixteen = 13;
   } else if(number.substring(0,1) == "C") {
   sixteen = 12;
   } else if(number.substring(0,1) == "B") {
   sixteen = 11;
   } else if(number.substring(0,1) == "A") {
   sixteen = 10;
   } else {
   sixteen = eval(number.substring(0,1));
   }
   sixteen = sixteen * 16;
   if(number.substring(1,2) == "F") {
   one = 15;
   } else if(number.substring(1,2) == "E") {
   one = 14;
   } else if(number.substring(1,2) == "D") {
   one = 13;
   } else if(number.substring(1,2) == "C") {
   one = 12;
   } else if(number.substring(1,2) == "B") {
   one = 11
   } else if(number.substring(1,2) == "A") {
   one = 10;
   } else {
   one = eval(number.substring(1,2));
   }
   return sixteen + one; //return sum of these decimal numbers
   }

   function changeFgColor(number) { //this function receives the background’s hexadecimal color code
   //as a parameter, and then returns a suitable font color that would
   //be visible on that background color
   rnumber = "";
   for(i=0; i <= number.length-1; i++) {
   temppos = ralpha.indexOf(number.charAt(i));
   rnumber = rnumber + rhexArray[temppos];
   }
   return rnumber;
   }

   function changeBgColor() { //this function reads in values from the text fields, parses the text
   //as a color code, and then changes the background color
   if(inputType == "hex") { //if user has changed the hexadecimal field
   document.colorform.hextext.value = document.colorform.hextext.value.toUpperCase();
   if(document.colorform.hextext.value.substring(0,1) == "#") { //if user placed "#" in front of hex color code
   colorCode = document.colorform.hextext.value.substring(1,7);
   } else {
   colorCode = document.colorform.hextext.value.substring(0,6);
   }
   document.colorform.redtext.value = h2d(colorCode.substring(0,2)); //converts to red’s decimal value
   document.colorform.greentext.value = h2d(colorCode.substring(2,4)); //converts to red’s decimal value
   document.colorform.bluetext.value = h2d(colorCode.substring(4,6)); //converts to red’s decimal value
   document.bgColor = colorCode; //change background color
   document.fgColor = changeFgColor(colorCode); //change font color to something readable
   return false; //exit function
   }

   //if program reaches this point, the color code is to be based on inputted decimal values,
   //as opposed to hexadecimal values

   //check red’s value range
   if (eval(document.colorform.redtext.value) > 255 || eval(document.colorform.redtext.value) < 0) {
   alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
   return false;
   }
   //check green’s value range
   if (eval(document.colorform.greentext.value) > 255 || eval(document.colorform.greentext.value) < 0) {
   alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
   return false;
   }
   //check blue’s value range
   if (eval(document.colorform.bluetext.value) > 255 || eval(document.colorform.bluetext.value) < 0) {
   alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
   return false;
   }

   red = d2h(eval(document.colorform.redtext.value)); //convert red’s decimal value to hex
   green = d2h(eval(document.colorform.greentext.value));//convert green’s decimal value to hex
   blue = d2h(eval(document.colorform.bluetext.value)); //convert blue’s decimal value to hex

   colorCode = red + green + blue; //create hexadecimal color code
   document.bgColor = colorCode; //set background color
   document.fgColor = changeFgColor(colorCode); //change font color to something readable
   document.colorform.hextext.value = "#" + colorCode; //rewrite hex’s text field with new color code
   }

   function changeInput(type) {
   inputType = type; //inputType is to determine whether the user is changing the decimal text fields,
   //or the hexadecimal text fields
   }

   function instruct() { //alerts user with instructions
   alert("Enter a Red, Green, or Blue value of 0 to 255 \nor enter a 6 digit Hex Color Code using numbers 0-9\nand letters A-F then click Change Background.");
   }

   _________________________________________________________

   <!– Paste this code into the HEAD section of your HTML document.
   You may need to change the path of the file. –>

   <script type="text/javascript" src="colorChange.js"></script>
   _________________________________________________________

   <!– Paste this code into the BODY section of your HTML document –>

   <div style="width: 300px; margin-left: 30%; background-color: #fff; color: #00009C; text-align: center; line-height: 1.5em; ">
   <form name="colorform" onSubmit="changeBgColor(); return false;">
   Red: <input type="text" name="redtext" size="3" value="255" onfocus="changeInput(’dec’)">
   Green: <input type="text" name="greentext" size="3" value="255" onfocus="changeInput(’dec’)">
   Blue: <input type="text" name="bluetext" size="3" value="255" onfocus="changeInput(’dec’)">
   <br>
   Hex Code: <input type="text" name="hextext" size="7" value="#FFFFFF" onfocus="changeInput(’hex’)">
   <br>
   <input type="submit" value="Change Background" style="background-color: #00009C; color: #fff;">
   <br>
   <input type="button" value="Instructions" onclick="instruct()" style="background-color: #00009C; color: #fff;">
   </form>
   </div>
   References :

Leave a Reply