javascript displaying error function is not defined.

Question

Javascript code:

<script>
$(document).ready(function(){
$("#verify").click(function(){
        if ($("#cval").val()==$("#captcha").text()){
          $("#pop").modal("hide");
          var id=$("#captcha").attr("data-id");
          if (_ths.hasClass("red")){
              $.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
                _ths.removeClass("red");
              });  
          }
          else{
            $.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
              _ths.addClass("red");
            });  
          }
          $("#captcha").val("");
        }
        else{
          $("#cval").val("");
          $("#cval").attr("placeholder","invalid captcha");
        }
      });
function thumb(id,ths){
    if (<?=$loggedin?>){
      $.post(base_url+"index.php/myad/addthumbs",{uniqueid:id});
      $(ths).addClass("red");
    }
    else{
        _ths=$(ths);
        var number = Math.floor(Math.random()*90000) + 10000;
        $("#captcha").attr("data-id",id);
        $("#captcha").text(number);
        $("#pop").modal("show");
    }
  };

  function staticthumb(id,ths){
    if (<?=$loggedin?>){
      if ($(ths).hasClass("red")){
          $.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
            $(ths).removeClass("red");
          });  
      }
      else{
        $.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
          $(ths).addClass("red");
        });  
      }
    }
    else{
      _ths=$(ths);
        var number = Math.floor(Math.random()*90000) + 10000;
        $("#captcha").attr("data-id",id);
        $("#captcha").text(number);
        $("#pop").modal("show");
    }           
  };
});
</script>

HTML code:

    <div class="col-sm-8" id="lists">
    <?php if(isset($products)):?>
          <?php foreach($products as $p):?>
            <div class="col-md-12">
          <div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px;padding:20px 0px 20px 0px;background:#f1f1f1">
            <div class="col-sm-3 col-md-3 col-lg-3">
              <?php $j = 0;?>
                <?php foreach($p['checkbox'] as $checkbox):?>
                  <?php if($j == 0):?>
                    <div class="large-image"> 
                        <img alt="#" src="<?php echo base_url();?>/uploads/<?php echo $checkbox['Image']?>" />
                        <div class="image-title"><span class="icon-thumbs-up" onclick="staticthumb(<?php echo $checkbox['UniqueID']?>,this);" id="thumb<?php echo $checkbox['UniqueID']?>" style="font-size:24px;"></span></div> 
                    </div>
                  <?php endif;?>
                  <?php $j++;?>
                <?php endforeach;?>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6"> 
              <div class="product-label">
                  <h4><?php echo $p["FullName"];?>, <?php echo $p["Area"];?></h4>
                  <h5 style="font-size:14px"><span class="icon-calendar"></span>  <?php echo $p["SaleDate"];?></h5>
                  <h5 style="font-size:14px"><span class="icon-clock"></span>
                  <?php for($i = 0; $i < count($p['StartTime']); $i++):?>
                      <?php echo $p['StartTime'][$i].'-'.$p['EndTime'][$i]?>
                  <?php endfor;?>
                  </h5>
                  <div data-balloon-length="fit" data-balloon=" <?php echo $p["Address1"].'-'.$p["Postal"];?>" data-balloon-pos="up"  ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-home"></span>  <?php echo $p["Address1"].'-'.$p["Postal"];?></h5></div>
                  <div data-balloon-length="fit" data-balloon=" <?php echo $p["description"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-file"></span>  <?php echo $p["description"];?></h5></div>
                  <!--<div class="panel-group accordion-simple" id="product-accordion">
                  <div class="panel" style="background:#f1f1f1;">
                    <div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-address"  class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Address </a> </div>
                    <div id="product-address" class="panel-collapse collapse">
                      <div class="panel-body"><h5 style="font-size:14px"><?php echo $p["Address1"];?></h5></div>
                    </div>
                  </div>
                  <div class="panel"  style="background:#f1f1f1;">
                    <div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-size" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Description </a> </div>
                    <div id="product-size" class="panel-collapse collapse">
                      <div class="panel-body"><h5 style="font-size:14px"><?php echo $p["description"];?></h5></div>
                    </div>
                  </div>
                </div>-->
              </div>

            </div>
            <div class="col-sm-3 col-md-3 col-lg-3">
              <div class="product-label">
                  <h4>CATEGORY</h4>
                  <?php foreach($p['checkbox'] as $checkbox):?>
                    <h5 style="font-size:14px"><?php echo $checkbox['Product']?></h5>
                  <?php endforeach;?>
              </div>

            </div>
          </div>
          </div>
          <?php endforeach;?>
    <?php else:?>
      <h3 style="text-align:center">SORRY THERE IS NO ANY DATA IS AVAILABLE.</h3>
    <?php endif;?>

HTML code for captcha validation:

  <div class="modal fade bs-example-modal-sm" id="pop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">Please verify captcha</h4>
    </div>
    <div class="modal-body">
      <h4 id="captcha" class="text-center"></h4>
      <hr>
      <div class="form-group">
        <input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" id="verify">Verify</button>
    </div>
    </div>
  </div>
  </div>

when I am a clicking on thumb it displaying me function staticthumb is not defined. but in reality you can see that I wrote function staticthumb I declared staticthumb function but still it displaying error so please help me. right now I am helpless so please help me and try to resolve my issue and thanks in advance.

Answer 1

A Function declaration in JavaScript has Functional Scope, meaning it is only accessible from within the function in which it is declared. If it is not declared in a function, it is in global scope.

You are declaring your staticthumb function within an anonymous function so it will only be available within that scope. The easiest fix is to move the function declaration out of the anonymous function, which will pollute your global variable space ( which you would want to generally avoid, but that is a topic on its own)

TL;DR; Move your staticthumb function to the first line right after your <script> tag before your $(document).ready.