ReferenceError: toggle is not defined

Here is my code and creating two toggle buttons for updating map and panic button but after clicking updating map, nothing is happening and getting this error.

ReferenceError: toggle is not defined.

Code:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
  content="width=device-width, minimum-scale=1, maximum-scale=1">
  <title>app template</title>
  <link href="css/reset.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
  <script type="text/javascript">

    function toggle(el){
      alert('hello');
      if(el.className!="off")
      {
        el.src='images/bt2.png';
        el.className="on";
      }
      else if(el.className=="on")
      {
        el.src='images/bt1.png';
        el.className="off";
      }

      return false;
    }  


  </script>

</head>

<body>
  <div class="wrapper">
   <!-- header start -->  
   <div class="top">
     <div class="inner-top-left"><a href="#"><img src="images/arrow.png" alt="" ></a></div>
     <div class="inner-top-right">Setting</div>            
     <div class="clear"></div>
   </div>   

   <!-- header end -->

   <!-- content start -->
   <div class="setting-bg">
     <div class="setting-wrapper">

       <div class="contenair">            
         <div class="setting-left">Updating Map</div>
         <div class="setting-right"><input type="image" src="images/bt2.png" width="41" height="15" class="off" onclick="toggle(this)"/> </div>
         <div class="clear"></div>
       </div>

       <div class="contenair"> 
         <div class="setting-left">Panic Button</div>
         <div class="setting-right"><img src="images/bt2.png" width="41" height="15"></div>
         <div class="clear"></div>
       </div>

     </div>
   </div>
   <!-- content end -->

   <!-- bottom start -->
   <div class="bottom">
     <div class="bottom-btn1"><a href="setting.html"><img src="images/settings39.png"  alt=""></a></div>
     <div class="bottom-btn2"><a href="#" onclick="myFunction()"><img src="images/magnifier5.png" alt=""></a></div>
     <div class="bottom-btn3"><a href="area.html"><img src="images/folder5.png" alt="" ></a></div>
     <div class="bottom-btn4"><a href="GoogleMapDirections.html"><img src="images/map2.png"  alt=""></a></div>
     <div class="clear"></div>
   </div>
   <!-- bottom end -->
 </div>
</body>

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<!-- Cordova-1.5.0.js file will be here -->
<script type="text/javascript" src="js/cordova-1.5.0.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="helloresponse.js"></script>
</html>

There is one another error getting after loading the page:

Uncaught SyntaxError: Unexpected token ILLEGAL setting.html:27

Solution

You have an illegal invisible character after your toggle function. When pasted into jsfiddle it's visible: http://jsfiddle.net/7m5Sb/

It's right after the last }