I'm trying to pass a variable from one function to another, but the var elmId is being returned as an object and giving an error. When we click on any of the generated divs we should be able to change the size of the div by choosing a width / height value from the drop down menus.
I'm trying to pass the clicked div id which is elmId to function displayVals but it is not working. If we replace "#"+elmId in the function displayVals with the actual id of the first div created with is "#divid1" then it works. Why is the value of var elmId not being passed to displayVals
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.
js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.
js" type="text/javascript"></script>
<style>
.aaa{width:100px; height:100px; background-color:#ccc;}
button{width:100px; height:20px;}
</style>
<button class="idiv">div</button>
<select id="width">
<option>100px</option>
<option>200px</option>
<option>300px</option>
</select>
<select id="height">
<option>100px</option>
<option>200px</option>
<option>300px</option>
</select>
<p></p>
<script type="text/javascript">
var divId = 1;
$("button").click(function(){
var elm = $('<div id=divid' + divId + ' class=aaa></div>');
elm.appendTo('p');
divId++;
});
$("p").click(function(e){
var elmType = $(e.target)[0].nodeName,
elmId = $(e.target)[0].id;
return displayVals(elmId);
});
function displayVals(elmId) {
var iwidth = $("#width").val();
var iheight = $("#height").val();
$("#"+elmId).css({width:iwidth, height:iheight});
console.log(elmId);
}
$("select").change(displayVals);
displayVals();
</script>
