Highlighted

Error on changing backgroundColor with javascript

New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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

TOPICS
Code, Error

Views

78

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Error on changing backgroundColor with javascript

New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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

TOPICS
Code, Error

Views

79

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 16, 2020 0
New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
Adobe Community Professional ,
Aug 16, 2020

Copy link to clipboard

Copied

"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/

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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) ^^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
ClayUUID LATEST
Adobe Community Professional ,
Aug 16, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0