Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the width and height of the div. While the Chrome inspector shows that the attribute changes are being made, the actual content on the page does not reflect these updates.
<button onclick="myFunction()">Try it</button>
<div id="block" style="background-color:blue;">
</div>
function myFunction() {
document.getElementById("block").setAttribute("width", Math.floor(Math.random() * 1001) + "px" );
document.getElementById("block").setAttribute("height", Math.floor(Math.random() * 1001) + "px" );
}
For more detailed information and testing, refer to the following jsfiddle link: http://jsfiddle.net/NR2k6/118/