Animate CC 2019: Button symbol not communicating with parent HTML background element

Report · Dec 20, 2018

What JS code can I apply to a button symbol within ANIMATE CC to change the background image of HTML parent page onclick?

I'm currently using getElementsByTagName( ) - not functioning at all...

Current CSS declaration in HTML page:

html

{

background: url(img/bkg3.png) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Current JS on button symbol within Animate CC:

function fl_MouseClickHandler() {

function changeBackground() {

this.document.getElementsByTagName("html").style.background = "url(img/bkg4.png)";

}

Any assistance would be greatly appreciated!

Thanks!

Report · Dec 20, 2018

Hi March

try

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

Klaus

Report · Dec 20, 2018

Hi Klaus

Thanks for your quick reply!

I updated my button symbol code with your string:

this.cwbut.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler() {

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

}

I updated my CSS changing 'html' to 'body':

body

{

background: url(img/bkg3.png) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

When I click on my button (within canvas), it does not replace the current background image bkg3.png with bkg4.png.

FYI

My FLA architecture is simple:

One frame.

One layer with single button symbol.

One layer with JS button symbol code.

HTML Architecture

One CSS background image.

One button (canvas).

Assets

Two PNGs.

Thanks again for your help Klaus!

Report · Dec 20, 2018

March

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

this.document ... the this can't be right .. long story

try my second revised suggestion.

Klaus

Report · Dec 20, 2018

Klaus

Brilliant!

You are...

Working nicely.

Thank You Sir

Report · Dec 20, 2018

March you're welcome.

Please could you do me the favor and mark my answer which worked for you as correct?

cheers

Klaus

Report · Dec 20, 2018

Sorry, this might not work because you declared the background-image for the html-element in the first instance.

I would supply an id to you body like

Further I would css-declare:

#docbody {

background-image: url("img/bkg3.png");

background-size: cover}

then in JS for your button:

function YOURBUTTONCLICKHANDLER(e) {

document.getElementById("docbody").style.backgroundImage = "url('img/bkg4.png')";

}

this.YOURBUTTONNAME.addEventListener('click', YOURBUTTONCLICKHANDLER);

Things in italic/CAPITAL setyour own names

Klaus

Report · Dec 20, 2018

Reading your reply now...

Animate CC 2019: Button symbol not communicating with parent HTML background element

1 Correct answer