Error on changing backgroundColor with javascript

Report · Aug 16, 2020

I am using this code:

function myTimer() {

  const random_hex_color_code = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

console.log(random_hex_color_code())

this.Sym1.on("added", function () {

  document.getElementById("Sym1").style.backgroundColor = (random_hex_color_code());

});
} 
setInterval(myTimer, 3000);

Error message: "Uncaught TypeError: Cannot read property 'on' of undefined
at myTimer" - and no change of backgroundColor happens

if I use a simplified version like:

function myTimer() {
	
const random_hex_color_code = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

  console.log(random_hex_color_code())

  document.getElementById("Sym1").style.backgroundColor = (random_hex_color_code());

} 
setInterval(myTimer, 3000);

Error message: Uncaught TypeError: Cannot read property 'style' of null
at myTimer - and no change of background-color happens

any ideas on correct syntax? any help is appreciated.... thanks in advance

Report · Aug 16, 2020

I am checking this.... seems the correct direction: https://community.adobe.com/t5/animate/javascript-targeting-movieclip-to-change-colour-problem/td-p/...

Report · Aug 16, 2020

Despite I have a MC with the instance name Sym1 on the stage I receive the error massege: "Sym1 is not defined" at the browser... I use:

Sym1.filters = [
new createjs.ColorFilter(0,0,0,1, 0,0,255,0)
];

Now that I already know that I need to size the ColorFilter Class instead of JS/CSS

do I maybe need to target the drawing object within the MC with a special identifier additionally?

Report · Aug 16, 2020

"this" does not, by default, point to the root timeline from within event handlers. Use bind() on your function, or stash the desired value of this somewhere in your scope chain and reference that instead.

Also, why are you doing this in such a roundabout way? It looks like you have a function set to fire every three seconds... which defines a function to generate a random color... and then adds another event handler (cumulatively!)... which then finally tries to change the color? There has to be a better way to do all that.

And is Sym1 a browser DOM element or a symbol on the Animate stage? If the latter, getElementById won't find it.

Finally, why are you using all that unnecessary ES6 frippery in the color generator function? That will cause your code to fail in IE11, which still makes up a significant percentage of desktop browsers. And the code is strange. Why are you generating an unnecessarily large number and chopping off part of it instead of just generating a correctly sized value in the first place?

https://css-tricks.com/snippets/javascript/random-hex-color/

Report · Aug 16, 2020

Thank you for your reply!

This is the code I use now according to your recommendation:

var lcars1 = new lib.lcars1(lcars1);
stage.addChild(lcars1);	
lcars1.x = 10;
lcars1.y = 16;
	
var lcars2 = new lib.lcars2(lcars2);
stage.addChild(lcars2);
lcars2.x = 10;
lcars2.y = 161;	

var but1 = new lib.but1(but1);
stage.addChild(but1);	
but1.x = 1406.5;
but1.y = 44.8;
		
		
		
function myTimer() {
			
			
var randomColor1 = Math.floor(Math.random()*16777215).toString(16);
lcars1.shape.graphics._fill.style = randomColor1;
		
var randomColor2 = Math.floor(Math.random()*16777215).toString(16);
lcars2.shape.graphics._fill.style = randomColor2;
			
var randomColor3 = Math.floor(Math.random()*16777215).toString(16);
but1.shape.graphics._fill.style = randomColor3;
	

		}
		setInterval(myTimer, 3000);

Can you please teach me the correct syntax of .bind to avoid that:

Uncaught TypeError: Cannot read property 'graphics' of undefined at myTimer...

Before that I tried to change the color of the MCs with a color matrix filter, but it changed the color within the complete MC retangle, which is not the desired result. (asian-cousine.starfleetUpTo.date) ^^

Report · Aug 16, 2020

var lcars1 = new lib.lcars1(lcars1);
stage.addChild(lcars1);	
lcars1.x = 10;
lcars1.y = 16;
	
var lcars2 = new lib.lcars2(lcars2);
stage.addChild(lcars2);
lcars2.x = 10;
lcars2.y = 161;	

var but1 = new lib.but1(but1);
stage.addChild(but1);	
but1.x = 1406.5;
but1.y = 44.8;
		
		
		
function myTimer() {
			
			
var randomColor1 = Math.floor(Math.random()*16777215).toString(16);
lcars1.shape.graphics._fill.style = randomColor1;
		
var randomColor2 = Math.floor(Math.random()*16777215).toString(16);
lcars2.shape.graphics._fill.style = randomColor2;
		
		
var randomColor3 = Math.floor(Math.random()*16777215).toString(16);
but1.shape.graphics._fill.style = randomColor3;
	

		}
		setInterval(myTimer, 3000);

Uncaught TypeError: Cannot read property 'graphics' of undefined at myTimer

so what about that .bind now?

Report · Aug 16, 2020

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind