the html page contains 3 radio buttons- red,green, blue.If we selected any one of radio button, onw new window has to open, and that window background color should be the selected radion button color. can anyone help me how to solve this..

the html page contains 3 radio buttons- red,green, blue.If we selected any one of radio button, onw new window has to open, and that window background color should be the selected radion button color. can anyone help me how to solve this..

• javascript
• html

3 Answers 3

Try this (demo on jsbin., you might need to allow popups):

HTML:

<label for="red">Red</label>
<input type="radio" id="red" name="windowcolor" data-color="red" />
<label for="green">Green</label>
<input type="radio" id="green" name="windowcolor" data-color="green" />
<label for="blue">Blue</label>
<input type="radio" id="blue" name="windowcolor" data-color="blue" />

JavaScript:

function openWindowWithColor() {
  var color = this.getAttribute("data-color");
  console.debug("Open new window with color: " + color);
  var myNewWindow = window.open();
  myNewWindow.document.body.style.background = color;
} 

var radios = document.getElementsByTagName("input");

for(var i = 0; i < radios.length; i++) {
  radios[i].addEventListener("change", openWindowWithColor);
}

<script>
    function open(var color){
        //window.open("new_page.html#"+color);
        var myNewWindow = window.open("url");
        myNewWindow.document.body.style.background = color;
    }
</script>

<input type="radio" onclick="open('red')" />
<input type="radio" onclick="open('green')" />
<input type="radio" onclick="open('blue')" />

var newwindow = window.open('popup.aspx','Color Popup','height=400,width=200');
newwindow.document.body.style.background = "#000";