Can I change a value in parent page's JS from iframe's JS?

Question

I have a page with 3 iframes and this page loads a JS file that has

var stayFifty = new Boolean(false);

and a function that changes what it does based on this boolean.

In an iframe on this page I have an onclick function defined as

toggleFifty = function() {
    parent.stayFifty = new Boolean(!(stayFifty.valueOf()));
};

added to an img tag with

onclick="toggleFifty();"

But when I click on the img tag, the toggleFifty function doesn't seem to fire. I believe this has something to do with how the toggleFifty function is trying to change the stayFifty variable. Can someone explain how to fix this issue and a little bit about the scope problem?

I tried using information from this link but it seems I am not understanding something.

Answer 1

You are missing the parent when you change the value of the stayFifty variable:

toggleFifty = function() {
    parent.stayFifty = !parent.stayFifty;
};

BTW, notice that you don't need to use Boolean constructor when working with boolean variables, and when you declare you can simply use Boolean literals:

// on your parent page
var stayFifty = false;