Question

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>

Answer 1

CSS:

.divs{width:100px; height:100px; background-color:#ccc;}
button{width:100px; height:20px;}    
.selected{background:#dd0000;}

jQuery:

<script type="text/javascript">
var divId=1,selecteddiv="";
$("button").click(function(){
    $('p').append('<div id="divid'+divId+'" class="divs"></div>');
    divId++;
});

$(".divs").live("click",function(){
    selecteddiv=$(this).attr('id');
    $(this).addClass('selected');
    return false;
});

function displayVals() {
    if(selecteddiv!=""){
        var iwidth = $("#width").val();
        var iheight = $("#height").val();
        $("#"+selecteddiv).css({width:iwidth, height:iheight});
    }
}

$("select").change(displayVals);
displayVals();
</script>

• button will create the divid[X]
• as you’re generating them dynamically you need to you live (as they don’t exist when click event is being attached to class .divs)
• click on one of the .divs will put the ID name inside selecteddiv
• just to show you which one is selected the .selected class will be added to this div
• when you’ll change the value .change event will kick in and if selecteddiv isn’t empty then it will change the width and height
• you can drop the last line displayVals(); as you don’t have any divs created at the begining

I hope that’s helpful enough 🙂

Cheers

G.