controlling light entity in a-frame

Question

I am using a number of entities in A-Frame but cannot seem to control the color (AKA intensity) properly. I can access and set the value one time but after that, it is locked and will not respond to any modifications. Is there some obvious solution?

My application is to have a set of spotlights that actively wax and wane in intensity as you walk past them in the virtual environment.

UPDATE: I start out with my A-Frame script by defining a set of spotlights and some variables for them:

<a-light type="spot" angle="21" color="#BBB" position="33.1 -17 39" target="#Pic01" id="Spot01"></a-light>  
<a-light type="spot" angle="21" color="#BBB" position="38.1 -17 39" target="#Pic02" id="Spot02"></a-light>
<a-light type="spot" angle="21" color="#BBB" position="43.1 -17 39" target="#Pic03" id="Spot03"></a-light>
<a-light type="spot" angle="21" color="#BBB" position="48.1 -17 39" target="#Pic04" id="Spot04"></a-light>
...  
<script> 
  var SpotA=document.querySelector('#Spot01');  
  var SpotB=document.querySelector('#Spot02');  
  var SpotC=document.querySelector('#Spot03');  
  var SpotD=document.querySelector('#Spot04');  
  ...  
</script>  
Later in the code in a script block, I would use:
<script>  
  ...  
  SpotA.object3D.children[0].color.r=xxx;  (some decimal value)  
  SpotA.object3D.children[0].color.g=xxx;  (some decimal value)  
  SpotA.object3D.children[0].color.b=xxx;  (some decimal value)  

This would usually work but at random, some sort of thing happens where the light cone turns totally black and while you can set and even read the values back, control of the light cannot be recovered. This always occurs if I try to set the color with a hex value (such as #3AA) and sometimes at random with individual rgb components.

If I manually query SpotA from the console, it returns:

'< a-light type="spot" angle="21" color="#B0B0B0" position="33.1 -17 39" target="#Pic01" id="Spot01" light="">

... which shows exactly what I expect- all the elements are present and can be accessed from the console. Note however that the color attribute cannot be set using a javascript statement. And-

SpotA.object3D.children[0].color.r= (some value)

...will do nothing, and the light cone remains black. Whether done in code or manually, the results are consistent there. Frustrating.

Now, if I query the value of any component, it returns the value that I have set properly, but the light will be locked up and produce nothing but a black cone. Eventually, it will only return "undefined".

SpotA.object3D.children[0].color.r=0.73333; (enter)
<. 0.73333
SpotA.object3D.children[0].color.r (enter)
<. undefined

Any ideas? Something appears broken, or maybe I am accessing the values incorrectly. But there was nothing in the documentation to guide me; I had to look at the elements and pick what worked.

Answer 1

Modify the DOM attribute. Don't access the children directly (light not guaranteed to be first children, not initialized by the time you access it...) eg:

SpotA.setAttribute('color', 'red');

You can use any of the following formats for the color:

rgb(250, 0,0)
rgb(100%,0%,0%)
hsl(0, 100%, 50%)
#ff0000
#f00
red