javascript/jquery variable not defined

Question

the script has 5 panels 3 of which are selectable and trigger the onclick event below.

it works fine and even alerts the value of "selectedID"

but when i try to change the values on the inputs and trigger the on click, keyup it gives me the error "selectedID not defined"

Here is my JS

    jQuery(document).ready(function($) {

///////////
     $("div.door").click(function () {

         resetall();
          $("div.door").removeClass("panelselected");
          $(this).toggleClass("panelselected");
          var selectedID = $(this).attr("id"); 
              alert(selectedID);


          $("#customisedoor").fadeIn("slow");
          $("#"+selectedID).animate({
                height: 118-Number($("#doorheight").val())*2+"px"

           }, 200 );
           var height = 118-Number($("#doorheight").val())*2;
           var topmargin = Number($("#doorheight").val())*2;
          $("#"+selectedID).css("margin-top", topmargin+"px");
          ////////////////////////////IF PANEL 2
          if(selectedID === 'panel2'){
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
          }
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel3'){
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');  
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
          }
          /////////////////////////
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel4'){
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');  
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
          }
          /////////////////////////
    });

    $("#doorwidth").keyup(function (){

           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    $("#doorwidth").click(function (){

           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    function calculateheight(){
         $("#"+selectedID).animate({
                height: 118-$("#doorheight").val()*2+"px"

              }, 200 );
              height = 118-$("#doorheight").val()*2;
              topmargin = $("#doorheight").val()*2;
        $("#"+selectedID).css("margin-top", topmargin+"px")
    }

        $("#doorheight").keyup(function (){
          calculateheight();
          });

        $("#doorheight").click(function (){
          calculateheight();

    });

    function resetall(){
        $(".appended").remove();
        $(".door").css({'width':'150','height':'118','margin':'0px'});
        $(".door").removeClass("panelselected");
        $("#doorheight").val(30);
        $("#doorwidth").val(75);
        $("#totalwidth").val(300+$("#doorwidth").val());

    }

    $("#reset").click(function () {
        //alert("removed");
        resetall();
    });
    //////////////////////////////////////////////////////////////////

    });

Full source FROM Firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- JS -->

<script type="text/javascript" src="plugins/validator/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugins/ui/jquery.effects.core.js"></script>



<!-- STYLES -->

<style>
<!-- LAYOUT -->


<!-- SKIRTS -->
.panelContainer{
height:128px;
width:900px;
float:left; 
}

.endpanel{
width:150px;
float:left;
height:118px;
background:#BFDDF2; 
border:1px solid #7DB8DB;
}
.panel{
width:150px;
bottom:0;
float:left;
height:118px;
background:#BFDDF2; 
border:1px solid #7DB8DB;
}

.mid{
    border-left:0px;
    }

.door:hover{
width:150px;
float:left;
height:118px;
background:#ECF5FB; 
border:1px solid #fff;
}

.panelselected{
width:150px;
float:left;
height:118px;
background:#ECF5FB; 
border:1px solid #fff;
}
.container{
    min-width:150px;
    width:auto;
    float:left;
    margin-top:3px;
    height:7px; 
    }

.button{
    width:7px; height:7px;
    margin:3px;

    }
.left{float:left;}
.right{float:right;}






</style>
</head>

<body>
<div style="width:780px; height:80px;float:left;">
    <h3>Please select a panel and customise the width and height to fit under your door step / doorway</h3>       

     <ul>
        <li>Total Draught Skirt Width: <input type="text" disabled id="totalwidth" value="375"/>(CMS)   </li>
     </ul>
</div>
<!-- CUSTOMISE DOOR -->



<div style="margin-top:20px; min-width:780px; height:80px;float:left;position:relative;">
        <div class="endpanel" id="panel1">
            <img src="images/draught-skirts/button.png" class="button left"/>
        </div>
        <div id="panel2" class="panel mid door">

        </div>
        <div id="panel3" class="panel mid door"></div>
        <div id="panel4" class="panel mid door"></div>
        <div class="endpanel mid" id="panel5">

            <img src="images/draught-skirts/button.png" class="button right"/>
        </div>
</div>

   <div id="customisedoor" style="clear:both; margin-top:50px;width:400px; height:80px;float:left; display:none;">


        <strong>Customise Your Door Panel</strong>
    <table>
        <tr>
            <td>Width</td>

            <td>
                <input type="number" name="width" id="doorwidth" value="75"/>(CMS)
            </td>
        </tr>
         <tr>
            <td>Height From Top of Skirt: </td>
            <td>
                <input type="number" name="height" id="doorheight" value="30"/>(CMS)
            </td>

       </tr>
    <tr>
    <td></td>
    <td><input type="button" id="reset" value="Reset"/></td>
    </tr>
        </table>


    </div>

    <script type="text/javascript">

    jQuery(document).ready(function($) {

///////////
     $("div.door").click(function () {
         resetall();
          $("div.door").removeClass("panelselected");
          $(this).toggleClass("panelselected");
          var selectedID = $(this).attr("id");


          $("#customisedoor").fadeIn("slow");
          $("#"+selectedID).animate({
                height: 118-Number($("#doorheight").val())*2+"px"

           }, 200 );
           var height = 118-Number($("#doorheight").val())*2;
           var topmargin = Number($("#doorheight").val())*2;
          $("#"+selectedID).css("margin-top", topmargin+"px");
          ////////////////////////////IF PANEL 2
          if(selectedID === 'panel2'){
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
          }
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel3'){
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');  
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
          }
          /////////////////////////
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel4'){
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');  
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
          }
          /////////////////////////
    });

    $("#doorwidth").keyup(function (){
                  alert("IDis"+selectedID);
           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    $("#doorwidth").click(function (){
        alert("IDis"+selectedID);
           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    function calculateheight(){
         $("#"+selectedID).animate({
                height: 118-$("#doorheight").val()*2+"px"

              }, 200 );
              height = 118-$("#doorheight").val()*2;
              topmargin = $("#doorheight").val()*2;
        $("#"+selectedID).css("margin-top", topmargin+"px")
    }

        $("#doorheight").keyup(function (){
          calculateheight();
          });

        $("#doorheight").click(function (){
          calculateheight();

    });

    function resetall(){
        $(".appended").remove();
        $(".door").css({'width':'150','height':'118','margin':'0px'});
        $(".door").removeClass("panelselected");
        $("#doorheight").val(30);
        $("#doorwidth").val(75);
        $("#totalwidth").val(300+$("#doorwidth").val());

    }

    $("#reset").click(function () {
        //alert("removed");
        resetall();
    });
    //////////////////////////////////////////////////////////////////

    });
    </script>

</body>
</html>

Jon Skeet wrote an interesting article you should take a look at: yoda.arachsys.com/csharp/incomplete.html. Often in the process of reducing your problem to its core, you will figure out the bug yourself. — Ian Henry
– Ian Henry, Commented Mar 27, 2011 at 19:53

DashK · Accepted Answer · 2011-03-27 20:03:49Z

selectedID is out of scope - It's defined inside the click(...) function like below...

$("div.door").click(function () {
  ... 
  var selectedID = $(this).attr("id"); 
  ...
});

Which means selectedID only exists inside onClick anonymous function. It's not available in the keyup(...) function.

$("#doorwidth").keyup(function (){
  ...
  // selectedID is not available here, since it was declared inside click(...)
);

You'll want to something like this...

jQuery(document).ready(function($) {
  // Define selectedID in an outer scope so it's available to all functions inside the closure.
  var selectedID;
  $("div.door").click(function () {
    ...
    // Instead of declaring selectedID inside this function, use selectedID from the outer scope.
    selectedID = $(this).attr("id"); 
    ...
  });

  $("#doorwidth").keyup(function (){
    // NULL check for selected ID
    if (selectedID) {
      $("#"+selectedID).animate({
        width: $("#doorwidth").val()*2+"px"
      }, 200 );
      $("#totalwidth").val(parseInt(300) + parseInt($("#doorwidth").val());
    }
  );

  ...
});

Jesse Bunch · Accepted Answer · 2011-03-27 19:47:04Z

3

You might try moving your var declaration outside of your jQuery click handler:

var selectedID = "";

And changing:

var selectedID = $(this).attr("id");

to:

selectedID = $(this).attr("id");

answered Mar 27, 2011 at 19:47

Jesse Bunch

6,6694 gold badges39 silver badges61 bronze badges

1 Comment

detaylor Over a year ago

This solution will work because removing the var keyword means that the selectedID variable will be scoped globally. DashK's solution just increases the scope enough to be accessible.

Collectives™ on Stack Overflow

javascript/jquery variable not defined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related