getting user input to set new window parameters

Question

I am trying to let the user set the height width and color for a new pop up window here is some example code of what i have been trying

<input type = "button" value = "Open New Window" 
                onclick = "NewWin = window.open('','NewWin',
                    'toolbar=no,status=no,width=200,height=document.getElementsByName('height')[0].value');" />

i have also tried setting height to a variable and saying height height=heightVar and that didnt work. Is there a bit of syntax that im using wrong?

Answer 1

You will have to separate the javascript from the markup. That's a common best practice for developing in HTML/Javascript. I've put an example in jsfiddle:

HTML:

<h1>New Window properties</h1>

<div>
    <label for="windowWidth">Width:</label><br />
    <input id="windowWidth" type="number" value="200" />
</div>

<div>
    <label for="windowHeight">Height:</label><br />
    <input id="windowHeight" type="number" value="200" />
</div>

<div>
    <input id="newWindow" type="button" value="Open New Window" />
</div>

Javascript:

var newWindowButton,  // Reference to the button we can click on
    newWindowWidth,   // We can provide a width for the new window, defaults to 200 px
    newWindowHeight;  // We can provide a height for the new window, defaults to 200 px

newWindowButton = document.getElementById('newWindow');
newWindowButton.onclick = function () {
    var newWindowUrl,
        newWindowName,
        newWindowOptions;

    newWindowWidth = document.getElementById('windowWidth').value;
    newWindowHeight = document.getElementById('windowHeight').value;
    newWindowUrl = '';
    newWindowName = 'NewWin';    
    newWindowOptions = 'toolbar=no,status=no,width='+newWindowWidth+',height='+newWindowHeight;    

    window.open(newWindowUrl, newWindowName, newWindowOptions);
};

http://jsfiddle.net/yg9jeyza/2/

Answer 2

<input id="height" type="number" />
<input type="button" value="Open New Window" onclick="openNewWindow()" />

<script type="text/javascript">
      openNewWindow = function () {
      var height = document.getElementById('height').value;
      window.open('','newWin','toolbar=no,status=no,width=200,height=' + height);
  }
</script>

If you don't use jQuery, you don't need to use index in getElementById

Answer 3

Concatenate the user input value with the height and width property of the new window. Try this way,

HTML :

Height : <input type="text" id="height" /><br/>
Width : <input type="text" id="width" />

<input type="button" id="newWindow" value="New Window" />

javaScript :

newWindow.onclick = function(){
    window.open("http://www.google.com/", "A", "height="+ document.getElementById("height").value + "," + "width=" + document.getElementById("width").value);
};

Or, jQuery :

$("#newWindow").on("click", function(){
    window.open("http://www.google.com/", "A", "height="+ $('#height').val() + "," + "width=" + $("#width").val());
});

jsFiddle