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

Share Improve this question Follow asked Jul 4, 2012 at 11:43 harikaharika 3311 gold badge22 silver badges77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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