Changing textContent color in table at run time

[aheight]

Hi,

I was wondering if someone could help me change the color of table check box labels when my HTML file is loaded. At run time, I load a JSON file with color data for each branch of a function I'm plotting via WebGL and display a table of check boxes one for each function branch (there can be many). I then give the reader the option of choosing which branches and rings of the function to display. I would like to color-code the check box text to the same color as the branch plot to make it easier for the reader to see which branch in the plot corresponds to which check box. In the <table> row below, I have for example, Branch 1 with id="testthis" and a label of "Branch 1". Suppose in my JSON file, I have the color of Branch 1 given by:

var branch1color=[165, 42,42];

which is brown. Ideally, I would like to switch out the "Branch 1" text to brown text via:
<font color="0xa52a2a">Branch 1</font> but when I try for example to use:

var mycolor=branch1color[[0]]*Math.pow(16,4)+myvalue[[1]]*Math.pow(16,2)+myvalue[[2]];
document.getElementById("testthis").textContent=mycolor.toString(16);

or some variation of that, I cannot get it to work.

Could someone help me with this please?
Thanks

<tr>
                    <td class="branch1" id="testthis">
                        Branch 1
                        <input type="checkbox"  id="ring1branch1"
                                     checked="checked" name="branch1"/>
                    <td class="branch2">
                        Branch 2<input type="checkbox" id="ring1branch2"
                                       checked="checked" name="branch2" />
                    <td class="branch3">
                        Branch 3<input type="checkbox" id="ring1branch3"
                                       checked="checked" name="branch3" />
                </tr>

 

[Borg]

textContent is used to set the name and not the color.
Normally, you would set the style attribute on an element with something like this:
document.getElementById("testthis").style.color = "0xa52a2a".

 

[aheight]

textContent is used to set the name and not the color.
Normally, you would set the style attribute on an element with something like this:
document.getElementById("testthis").style.color = "0xa52a2a".

Hi.
Thanks for replying. Unfortunately, that's not changing the color. It's still black.

 

[Borg]

That's the basic standard.
Are you setting it exactly as I showed or are you using the other setting - mycolor.toString(16)?
Can you make the example on the linked page work?

 

[aheight]

That's the basic standard.
Are you setting it exactly as I showed or are you using the other setting - mycolor.toString(16)?
Can you make the example on the linked page work?

Ok thanks for that. If I change it for example like the link, to:

document.getElementById("testthis").style.color = "red";

then it's changed to red. But not if I use the hex code. My colors though won't in general be standard colors but rather in the form of rgb(a,b,c) which I can then convert to a 6-digit hex number if I have to. I'll continue working on it to see if I can get a numeric color code to work.

 

[Borg]

Ok thanks for that. If I change it for example like the link, to:

document.getElementById("testthis").style.color = "red";

then it's changed to red. But not if I use the hex code. My colors though won't in general be standard colors but rather in the form of rgb(a,b,c) which I can then convert to a 6-digit hex number if I have to. I'll continue working on it to see if I can get a numeric color code to work.

I suspected that it wasn't the setting but the value that you were using. Try printing out the value to the console.log to see what the mycolor value is.

 

[aheight]

Ok, I think I have it: need to specify the hex number as "#a52a2a". That works! Thanks a bunch!

Just an update: Once I have my color as a 6-digit hex number in "mycolor", I can then use:

document.getElementById("testthis").style.color = "#"+mycolor.toString(16);

 

[jack action]

You shouldn't use the 'font' element anymore. Use 'span' instead (You don't need to change your javascript code, it will work the same way):

<span id=testthis style="color:#a52a2a;">Branch 1</span>

Better yet, use a css file. The html file would be:

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

...

<span id=testthis>Branch 1</span>

...

and the theme.css file would be:

#testthis{
  color:#a52a2a;
}

 

[aheight]

Thanks for that Jack. Not sure how I would implement a style-sheet I could edit on the fly with my application? Maybe you can look at how I implement the following which does change all the check box colors to the branch colors and offer a suggestion?

I have a JSON file with all the data to render the function in 3D via WebGL including the color codes. For each function, the data in the JSON file is a 4-D array: {ring, branch, [vertex data, index data, color data, normals, barycentric data, pointers]} Once the data is read into a 4D array called "thisData". I access the color code for each branch of each ring by accessing the first color code of each branch via:
[thisData[ring][branch][2][0],thisData[ring][branch][2][1],thisData[ring][branch][2][2]];
Not sure this is the best way to change all the labels of the check boxes.

Also, just found out I can use the gitHub library color.js to use the function Color([r,g,b]) so downloaded and added a src script to my file for this library.

I next then create two for-loops to change all the check box labels as per above (in the case of 2 rings with three branches each) which I've now changed the ID's for all the check boxes to "ringXbranchYtd":

 thisData=realData;
         for(var ring=1;ring<3;ring++){
          for(var branch=1;branch<4;branch++)
          {
         var branchColorValue=
        [thisData[ring-1][branch-1][2][0]*255,thisData[ring-1][branch-1][2][1]*255,thisData[ring-1][                    branch-1][2][2]*255];
         branchID="ring"+ring.toString()+"branch"+branch.toString()+"td";
         document.getElementById(branchID).style.color = Color(branchColorValue);
         }
     };

 

[jack action]

Is it necessary to keep the RGB as 3 separate values? If you only need the color as a whole, you could store it one of these two ways:

1. Assuming color data is of the form "ff8c00":

thisData=realData;
for(var ring=1;ring<3;ring++){
  for(var branch=1;branch<4;branch++){
    branchID="ring"+ring.toString()+"branch"+branch.toString()+"td";
    document.getElementById(branchID).style.color = "#" + thisData[ring-1][branch-1][2];
  }
}

This way, you can still access the RGB values quite easily with some string manipulations.

2. Assuming color data is of the form "dark orange" (case-insensitive; see list of available color names):

thisData=realData;
for(var ring=1;ring<3;ring++){
  for(var branch=1;branch<4;branch++){
    branchID="ring"+ring.toString()+"branch"+branch.toString()+"td";
    document.getElementById(branchID).style.color = thisData[ring-1][branch-1][2].replace(/ /g,"");  // remove all white spaces
  }
}

This way, you can use the color for styling AND text.

 

[aheight]

Hi Jack,

My color data is stored as separate red, green and blue values. I think I have it looking pretty good. You guys have been great helping me with the code. Unfortunately the data file is 4.5 Mb and takes a while to load on slower machines. Could you take a look at it (below link) and let me know if you can suggest any improvements? Note how all the check box branch colors switch when we switch to the real and imag parts of the function:

https://dl.dropboxusercontent.com/s/dhdvgj0astxrah6/index.html?dl=0

Made some good progress since starting the thread here:

https://www.physicsforums.com/threads/setting-up-3-d-rotation-in-web-page.881634/

 

[sdaSd]

Are you setting look more example

http://welookups.com/js/js_htmldom_css.html

 

[Roberto Teso]

Why don't use CSS rgb() directly, saving a bit of code?

document.getElementById(branchID).style.color = "rgb(r, g, b)";

Edit reason: I clicked save button by mistake.