Jump to content

javascript values in tables


MarcP

Recommended Posts

Good day, I have several variables with values assigned to them in this code. The problem that I am having is that when I run the script only the variable name shows up in the table and not the value assigned to it. Here is an example of what I'm talking about;<table width="950" border="0" align="center" cellpadding="4" cellspacing="0"> <tr> <td width="219">Developer</td> <td width="228"><p><font color ="#FFFFFF"> vol </font> Volume</p></td> <td width="100"><font color ="#FFFFFF"> devmls11 </font> mls.</td> <td width="180"><font color ="#FFFFFF"> devg11 </font> g.</td> <td width="183"><font color ="#FFFFFF"> devoz11 </font> oz.</td> </tr></table>vol, devmls11, devg11, devoz11 are all variables with values assigned to them. Any ideas would be greatly appreciatedM~

Link to comment
Share on other sites

You're going to need to show the code that generates the table.
Here's what I have so far
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"><title>Colorformulator [#customer#]  [#date#]</title><style type="text/css"><!--.fontforsheet {	font-family: Arial, Helvetica, sans-serif;	text-align: right;	color: #333;}.fontforsheet p {	color: #6AA957;	font-weight: bold;	text-align: center;}.fontforsheet table tr td {	color: #6AA957;	font-weight: normal;	text-align: center;}.background {	color: #333333;}.style {	font-weight: bold;}.letstyle {}.fontforsheetp {	font-family: Arial, Helvetica, sans-serif;	color: #FCFDFE;}.fontforsheetp {	color: #6AA957;}.fontforsheetp {	font-weight: bold;	text-align: center;}.fontforsheetp table tr td {	text-align: center;}--></style></head><body bgcolor="#333333" class="fontforsheetp"><table width="1000" border="0" align="center">  <tr>    <th class="fontforsheet" scope="col"><p>Color Formula Results Page</p>      <p> </p>      <table width="450" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="218"><span class="style">Client / Customer Name</span>:  </td>          <td width="232"><font color ="#FFFFFF">[#customer#]</font></td>        </tr>      </table>      <table width="450" border="0" align="right" cellpadding="0" cellspacing="0">        <tr>          <td width="140"><span class="letstyle">Street Address</span>:</td>          <td width="310"><font color ="#FFFFFF">[#address#]</font></td>        </tr>      </table>      <p> </p>      <table width="450" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="148"><span class="letstyle">Contact Number</span>:  </td>          <td width="302"><font color ="#FFFFFF">[#phone#]</font></td>        </tr>      </table>      <table width="450" border="0" align="right" cellpadding="0" cellspacing="0">        <tr>          <td width="140" class="letstyle">City, State, Zip :</td>          <td width="310"><font color ="#FFFFFF">[#citystatezip#]</font></td>        </tr>      </table>      <p> </p>      <table width="450" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="148">Date: </td>          <td width="302"><font color="#FFFFFF">[#date#]</font></td>        </tr>      </table>      <p> </p>      <p> </p>      <p>Below is the information that you entered into the software. Please make sure that it is correct,</p>      <p> if it is not, then go back to the software and re-enter your information</p>      <p> </p>      <table width="329" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="135" class="letstyle">Existing Level:</td>          <td width="194"><font color ="#FFFFFF">[#existinglevel#]</font></td>        </tr>      </table>      <table width="330" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="134" class="letstyle">Existing Tone:</td>          <td width="196"><font color ="#FFFFFF">[#existingtone#]</font></td>        </tr>      </table>      <table width="330" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="144"><div align="justify" class="letstyle"> Amount of Grey:</div></td>          <td width="186"><font color ="#FFFFFF">[#percent#]</font> % </td>        </tr>      </table>      <p> </p>      <table width="330" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="135" class="letstyle">Target Level:</td>          <td width="195"><font color ="#FFFFFF">[#targetlevel#]</font></td>        </tr>      </table>      <table width="310" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="135" class="letstyle">Target Tone:</td>          <td width="175"><font color ="#FFFFFF">[#targettone#]</font></td>        </tr>      </table>      <table width="330" border="0" align="left" cellpadding="0" cellspacing="0">        <tr>          <td width="234" class="letstyle">Is Hair Previously Colored ?</td>          <td width="96"><font color ="#FFFFFF">[#tint#]</font></td>        </tr>      </table>      <p> </p>      <p> </p>      <p>Formula</p>      <p>All Ratios are  - (Color : Developer) </p>      <p>If Possible All Amounts Will Converted To Millilitres (mls), Grams (g) and Ounces (oz)</p>      <script type="text/javascript" language="javascript">var existinglevel = "[#existinglevel#]";var existingtone = "[#existingtone#]";var percent = "[#percent#]";var targetlevel = "[#targetlevel#]";var targettone = "[#targettone#]";var tint = "[#tint#]";var difference = targetlevel - existinglevel;var clr1 = targetlevel targettone;var clr1mls = devmls11 - nsmls;var clr1g = devg11 - nsg;var clr1oz = devoz11 - nsoz;var bleach = "Decolorizer (Bleach)";var blchamt = "App. 1 Level Scoop";var devmls11 = "40";var devoz11 = "1.0";var devg11 = "30";var devmls115 = "60";var devoz115 = "1.5";var devg115 = "45";var devmls12 = "80";var devoz12 = "2.0";var devg12 = "60";var nsmlsvar nsgvar nsoz var volvar r = "One way to buy back or replace red pigment into the hair is to mix 1 part of a red fill shade, that coincides with your target tone, with 2 - 3 parts water and apply to dry or towel dry hair. Blot excess and continue with the color treatment.  DO NOT RINSE RED FILL SHADE PRIOR TO COLOR TREATMENT.  Another way is to add additional red pigment to the color mixture, above and beyond, the total color mixed.  Example - If your total color mixture is 75g, you would then add approximately a 1 inch ribbon of the red pigment or intensifier that coincides with your target color, to the mixture.  Check with your color manufacturer as to their recommendations.<p>"var k = " "One way to buy back or replace copper pigment into the hair is to mix 1 part of a copper fill shade, that coincides with your target tone, with 2 - 3 parts water and apply to dry or towel dry hair. Blot excess and continue with the color treatment.  DO NOT RINSE COPPER FILL SHADE PRIOR TO COLOR TREATMENT.  Another way is to add additional copper pigment to the color mixture, above and beyond, the total color mixed.  Example - If your total color mixture is 75g, you would then add approximately a 1 inch ribbon of the copper pigment or intensifier that coincides with your target color, to the mixture.  Check with your color manufacturer as to their recommendations.<p>"var g =  "One way to buy back or replace gold pigment into the hair is to mix 1 part of a gold fill shade, that coincides with your target tone, with 2 - 3 parts water and apply to dry or towel dry hair. Blot excess and continue with the color treatment.  DO NOT RINSE GOLD FILL SHADE PRIOR TO COLOR TREATMENT.  Another way is to add additional gold pigment to the color mixture, above and beyond, the total color mixed.  Example - If your total color mixture is 75g, you would then add approximately a 1 inch ribbon of the gold pigment or intensifier that coincides with your target color, to the mixture.  Check with your color manufacturer as to their recommendations.<p>"if (difference <= -2) { var vol = "0 Level Lift / 10";   } if (difference <= -2 & percentgrey >= "80") {var vol = "0 Level Lift / 10";}if (difference == -1) { var vol = "0 Level Lift / 10"; } if (difference == 0) { var vol = "0 Level Lift / 10"; }  if (difference == 1) { var vol = "1 Level Lift / 20"; } if (difference == 2) { var vol = "2 Level Lift / 30"; } if (difference == 3) { var vol = "3 Level Lift / 40";  } if (difference == 4) { var vol = "4 Level Lift / 40" ;} if (vol == "4 Level Lift / 40" ) {document.write ( "If your target color is a Level 9 or 10 Blonde or to get a full 4 levels of lift you may need to use a high lift or blonding agent added to your color formula. You also have the option to do a 2 step process by decolorizing (bleaching) the hair one half to one level lighter and then toning to desired color."  +  "<p>" )}ORif (difference == 4 ) {document.write ( "If your target color is a Level 9 or 10 Blonde or to get a full 4 levels of lift you may need to use a high lift or blonding agent added to your color formula. You also have the option to do a 2 step process by decolorizing (bleaching) the hair one half to one level lighter and then toning to desired color."  +  "<p>" )}var percent = "[#percent#]";if (percent < 31 ) {var nsmls = "5 to 10";} if (percent < 51 & percent > 30) { var nsmls = "15"; } if (percent > 50) { var nsmls = "30"; }if (percent < 31 ) {var nsg = "0 to 5";} if (percent < 51 & percent > 30) { var nsg = "10"; } if (percent > 50) { var nsg = "15"; }if (percent < 31 ) {var nsoz = "up to .25";} if (percent < 51 & percent > 30) { var nsoz = ".25"; } if (percent > 50) { var nsoz = ".50"; }if (difference >= 3 & targetlevel <=5) { var clr2 = " " ;   } if (difference >= 3 & targetlevel >=6 & targetlevel < 8 ) { var clr2 = ".1 or .01 Blue / Green Base " ;   } if (difference >= 3 & targetlevel >=8 & < 11) { var clr2 = ".01 or .21 Blue Base " ;   } if (difference >= 3 & targetlevel >=11) { var clr2 = ".21 Blue Violet or Violet Base " ;   } if (difference >= 3 & targetlevel >=5) { var clr2mls = "10" ;}if (difference >= 3 & targetlevel >=5) { var clr2g = "10" ;}if (difference >= 3 & targetlevel >=5) { var clr2oz = ".25" ;}if (clr2mls=="10" & nsmls== "0") {var clr1mls = "30" ;}if (clr2mls=="10" & nsmls== "5 to 10") {var clr1mls = "20 to 25" ;}if (clr2mls=="10" & nsmls== "15") {var clr1mls = "15" ;}if (clr2mls=="10" & nsmls== "30") {var clr1mls = " " ;}if (clr2g=="10" & nsg== "0") {var clr1g = "20" ;}if (clr2g=="10" & nsg== "0 to 5") {var clr1g = "15" ;}if (clr2g=="10" & nsg== "10") {var clr1g = "10" ;}if (clr2g=="10" & nsg== "15") {var clr1g = "5" ;}if (clr2oz==".25" & nsoz== "0") {var clr1oz = ".75" ;}if (clr2oz==".25" & nsoz== "up to .25") {var clr1oz = ".50" ;}if (clr2oz==".25" & nsoz== ".25") {var clr1oz = ".50" ;}if (clr2oz==".25" & nsoz== "up to .50") {var clr1oz = ".25" ;}if (difference >= 3 & targetlevel >=5) { document.write ( "If you are lifting 3 or more levels then you must use control. The only time that control is not necessary is when you desire a Copper color as an end result. Check the info sheet and as always check with your color manufacturer's guidelines."  +  "<p>" )  } if (vol == "2 Level Lift / 30" )  {document.write ( "When lifting <b>from levels 2 - 7</b> the underlying pigment is <b>orange</b>. <br><b>*</b>When lifting <b>from levels 8 - 10</b> the underlying pigment is <b>yellow.</b><br><br>Blue base controls orange.  <br>Green base also controls orange and reds.  <br>Blue/Violet or Violet controls yellows. " + "<p>"  )}if (vol == "3 Level Lift / 40" )  {document.write ( " <b>*</b> When lifting <b>3 or more levels</b> it is necessary to use some form of control to avoid unnecessary warmth. <i><b>unless</b></i> you are trying to achieve a Copper tone in the target color. <p><b>*</b>When lifting <b>from levels 2 - 7</b> the underlying pigment is <b>orange</b>. <br><b>*</b>When lifting <b>from levels 8 - 10</b> the underlying pigment is <b>yellow.</b><br><br>Blue base controls orange.  <br>Green base also controls orange and reds.  <br>Blue/Violet or Violet controls yellows. " + "<p>"  )}      </table><p> </p></th>  </tr></table><p> <font color ="#CF0B14">1:1 RATIO</font>  </p><p><i>*Only Mix Millilitres Together OR Grams OR Ounces</i></p><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Developer</td>    <td width="228"><p><font color ="#FFFFFF">vol</font> Volume</p></td>    <td width="100"><font color ="#FFFFFF">devmls11</font> mls.</td>    <td width="180"><font color ="#FFFFFF">devg11</font> g.</td>    <td width="183"><font color ="#FFFFFF">devoz11</font> oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">"N" Series (To cover grey)</td>    <td width="227"><font color ="#FFFFFF">targetlevel </font>N (NW)</td>    <td width="100"><font color ="#FFFFFF">nsmls</font> mls.</td>    <td width="181"><font color ="#FFFFFF">nsg</font> g.</td>    <td width="183"><font color="#FFFFFF">nsoz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Color 1 </td>    <td width="227"><font color ="#FFFFFF">clr1</font></td>    <td width="100"><font color ="#FFFFFF">clr1mls</font> mls.</td>    <td width="181"><font color="#FFFFFF">clr1g </font>g.</td>    <td width="183"><font color="#FFFFFF">clr1oz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Color 2 (Control, if any)</td>    <td width="227"><font color ="#FFFFFF">clr2</font></td>    <td width="100"><font color ="#FFFFFF">clr2mls</font> mls.</td>    <td width="181"><font color="#FFFFFF">clr2g </font>g.</td>    <td width="183"><font color="#FFFFFF">clr2oz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219"> </td>    <td width="227"> </td>    <td width="100"> </td>    <td width="181"> </td>    <td width="183"> </td>  </tr></table><p> </p><p><font color ="#CF0B14">1:1.5 RATIO</font>  </p><p><i>*Only Mix Millilitres Together OR Grams OR Ounces</i></p><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Developer</td>    <td width="228"><font color ="#FFFFFF">vol</font> volume</td>    <td width="110"><font color ="#FFFFFF">devmls115</font> mls</td>    <td width="170"><font color ="#FFFFFF">devg115</font> g</td>    <td width="183"><font color ="#FFFFFF">devoz115</font> oz</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">"N" Series (To cover grey)</td>    <td width="227"><font color ="#FFFFFF">targetlevel </font>N (NW)</td>    <td width="110"><font color ="#FFFFFF">nsmls </font>mls.</td>    <td width="171"><font color="#FFFFFF">nsg </font>g.</td>    <td width="183"><font color="#FFFFFF">nsoz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Color 1 </td>    <td width="227"><font color ="#FFFFFF">clr1</font></td>    <td width="110"><font color ="#FFFFFF">clr1mls</font> mls.</td>    <td width="171"><font color="#FFFFFF">clr1g </font>g.</td>    <td width="183"><font color="#FFFFFF">clr1oz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Color 2 (Control, if any)</td>    <td width="227"><font color ="#FFFFFF">clr2</font></td>    <td width="110"><font color="#FFFFFF">clr2mls </font>mls.</td>    <td width="171"><font color="#FFFFFF">clr2g </font>g.</td>    <td width="183"><font color="#FFFFFF">clr2oz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219"> </td>    <td width="227"> </td>    <td width="110"> </td>    <td width="171"> </td>    <td width="183"> </td>  </tr></table><p> </p><p><font color ="#CF0B14">1:2 RATIO</font>  </p><p><i>*Only Mix Millilitres Together OR Grams OR Ounces</i></p><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Developer</td>    <td width="228"><font color="#FFFFFF">vol </font>volume</td>    <td width="100"><font color ="#FFFFFF">devmls12</font> mls.</td>    <td width="180"><font color ="#FFFFFF">devg12</font> g.</td>    <td width="183"><font color="#FFFFFF">devoz12</font> oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">"N" Series (To cover grey)</td>    <td width="227"><font color ="#FFFFFF">targetlevel</font> N (NW)</td>    <td width="100"><font color ="#FFFFFF">nsmls</font> mls.</td>    <td width="181"><font color ="#FFFFFF">nsg</font> g.</td>    <td width="183"><font color="#FFFFFF">nsoz </font>oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Color 1 </td>    <td width="227"><font color ="#FFFFFF">clr1</font></td>    <td width="100"><font color ="#FFFFFF">clr1mls</font> mls.</td>    <td width="181"><font color="#FFFFFF">clr1g </font>g.</td>    <td width="183"><font color="#FFFFFF">clr1oz</font> oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219">Color 2 (Control, if any)</td>    <td width="227"><font color ="#FFFFFF">clr2</font></td>    <td width="100"><font color="#FFFFFF">clr2mls</font> mls.</td>    <td width="181"><font color="#FFFFFF">clr2g</font> g.</td>    <td width="183"><font color="#FFFFFF">clr2oz</font> oz.</td>  </tr></table><table width="950" border="0" align="center" cellpadding="4" cellspacing="0">  <tr>    <td width="219"> </td>    <td width="227"> </td>    <td width="100"> </td>    <td width="181"> </td>    <td width="183"> </td>  </tr></table><p> </p><table width="950" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>    <td><p>Comments:</p></td>  </tr>  <tr>    <td><font color="#FFFFFF">[#comments#]</font></td>  </tr></table></script></p><p> </p></body></html>

Link to comment
Share on other sites

you have a lot of errors to deal with first& as used in if (percent < 51 & percent > 30)should be if (percent < 51 && percent > 30)the text assigned to a variable should be without newline or carrage return breaksas in

var r = "One way to buy back or replace red pigment into the hair is to mix 1 part of a red fill shade, that coincides with your target tone, with 2 - 3 parts water and apply to dry or towel dry hair. Blot excess and continue with the color treatment. DO NOT RINSE RED FILL SHADE PRIOR TO COLOR TREATMENT. Another way is to add additional red pigment to the color mixture, above and beyond, the total color mixed. Example - If your total color mixture is 75g, you would then add approximately a 1 inch ribbon of the red pigment or intensifier that coincides with your target color, to the mixture. Check with your color manufacturer as to their recommendations.<p>"

the 'OR' in this next line

ORif (difference == 4 ) {document.write ( "If your target color is a Level 9 or 10 Blonde or to get a full 4 levels of lift you mayneed to use a high lift or blonding agent added to your color formula. You also have the option to do a 2step process by decolorizing (bleaching) the hair one half to one level lighter and then toning to desiredcolor." + "<p>" )}

did you mean to use???

else if (difference == 4 ) {document.write ( "If your target color is a Level 9 or 10 Blonde or to get a full 4 levels of lift you may need to use a high lift or blonding agent added to your color formula. You also have the option to do a 2 step process by decolorizing (bleaching) the hair one half to one level lighter and then toning to desired color." + "<p>" )}

you also have a missing operator in one of the if conditions I think it should be '-'

Link to comment
Share on other sites

Is that a template or something? Is there something else that fills in the data in your tags?There are a few things I immediately notice. First, your strings that go multiple lines are going to cause an error. Javascript does not support multi-line strings. If you want to write a string over several lines, you need to end it on each line and start it again on the next:

document.write ( " <b>*</b> When lifting <b>3 or more levels</b> it is necessary to use some form of " + "control to avoid unnecessary warmth. <i><b>unless</b></i> you are trying to achieve a Copper tone in" + ...

You also have a script block that has a bunch of HTML code in it. HTML code does not go in Javascript code, they are two different things. If you just write table markup with Javascript variable names, it's not going to automatically replace those with the values of the variables. You need to do that yourself. There would be several ways to do that. You could have Javascript remove any existing tables and create them from scratch again, or you could have the empty tables on the page and just fill the values into the cells. Since each variable can show up in more than one place, if you do that you'll need a way to identify every place where the variable needs to be displayed. One way to do that would be to put a CSS class on each place where a certain variable goes, then get all elements with that class and update each one. So for the vol variable, every place you want it displayed you could add a class to identify that, like "vol_value" or something. Then once you calculate the value of vol you would get all elements with a class of "vol_value" and update each one with the value. There are a few functions available online to get elements by a class name.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...