Setting background color to variable in javascript

Ok, so I'm very new to Javascript and I was wondering how one goes about making the background color a variable. Specifically, I have three different frames, and I want two of the ones on the side to change their color based on which page is being visited in the third frame. How can I set the background color to for these two side frames to a variable that can be changed by whatever document is in the third frame? I've been looking around online but my search has been fruitless.

EDIT- Alternately, a way to change it by clicking on a hyperlink would work just as well for my purposes.

EDIT 2 - In the same vein as the last quest开发者_运维百科ion, this is an alternate approach I'm trying that isn't producing much luck either, though I have more information about it: Setting background color to variable in javascript Part 2

---

To manipulate the background color property with javascript you need to:

//Set to red
document.getElementById("frame").style.backgroundColor="red"; 

//Save into variable
var color = document.getElementById("frame").style.backgroundColor; 

---

var frameRef = document.getElementById("frameId");
//alternatively  you can get all farmes in one array
//var textRef = document.querySelectorAll(".frameClass");

function changeBg(newColor){
  frameRef.style.backgroundColor =  newColor;
}

<button type="button" onclick="changeBg('red')" value="red">Red</button>
<button type="button" onclick="changeBg('blue')" value="blue">Blue</button>