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>
