Having trouble with executing specific commands on a div inside a container? I've got a function called doFunc() that doesn't seem to work when assigned to the div with id "x1" inside the container. Strangely enough, if I move the div outside of the container, everything runs smoothly. My goal is to create a button in the top right corner of an image for shrinking it (I styled it using CSS). Clicking the image should enlarge it using my large() function, and clicking the X should shrink the picture and hide the X div. The alert("I tried!") command works fine when the X div is within the container, but the resize command only works if the X div is moved outside its container (which is not where I want it to be). Any HTML and JavaScript gurus out there who can guide me on how to make these two lines of code execute without compromising my "Click the X to close" concept?
document.getElementById(containerId).style.width="300px";
document.getElementById(xId).style.display="none";
HTML-
<div class="container" id="container1" onclick="large('container1','x1')">
<img src="icecream.jpg">
<div class="x" id="x1" onclick="doFunc('container1','x1')">X</div>
</div>
JavaScript-
function large(containerId, xId){
document.getElementById(containerId).style.width="600px";
document.getElementById(xId).style.display="block";
}
function doFunc(containerId, xId){
document.getElementById(containerId).style.width="300px";
document.getElementById(xId).style.display="none";
alert("I tried!");