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>
