1. Provide Id to your controls:
<input type="number" value="height" id="txtHeight">
<input type="number" value="width" id="txtWidth"></input></input>
2. Remove the space preceding braces. Change:
document.getElementById ("size")
to
document.getElementById("size")
The correct code becomes:
<html>
<head>
<style>
#size {
position:absolute;
height:500;
width:500;
top:20%;
left:30%;
margin:-100px 0 0 -150px;
}
</style>
<script>
function myFunction()
{
document.getElementById("size").style.height = document.getElementById("txtHeight").value + "px";
document.getElementById("size").style.width = document.getElementById("txtWidth").value + "px";
}
</script>
</head>
<body>
height:<input type="number" value="height" id="txtHeight"><br>
width:<input type="number" value="width" id="txtWidth"><br>
<div id="size" align="center" style="border:1px solid red">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwnuyTru-iUDbPmRb-uHqzTfg3YDHkj_BNfReDUmb5awGMGbaa" style="width:304px;height:228px;">
</img></div>
<input type="button" value="resize" onclick="myFunction();"><br>
</body>
</html></br></br></br>
But I would like to suggest:
1. Check for validation(valid values for height and width)
2. Use JQuery for cross- browser support. It's always good.
Hope it helps.