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=""></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
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./jsapi"></script>
<script src="helloresponse.js"></script>
</html>
There is one another error getting after loading the page:
Share Improve this question edited Aug 5, 2014 at 7:20 Yuliam Chandra 14.7k12 gold badges55 silver badges69 bronze badges asked Aug 5, 2014 at 6:46 LaxmeenaLaxmeena 7902 gold badges7 silver badges28 bronze badges 4Uncaught SyntaxError: Unexpected token ILLEGAL setting.html:27
- I don't see an obvious problem. Are you getting any syntax errors when loading the page? – Barmar Commented Aug 5, 2014 at 7:01
- Agreed with Barmar, Something else is reason, check syntax near by the toggle function/ if possible post that code too. – Emma Commented Aug 5, 2014 at 7:07
- @Barmar , I have edited my answer plz see that... – Laxmeena Commented Aug 5, 2014 at 7:18
- @Barmar, End of curly braces after return false inside toggle function... – Laxmeena Commented Aug 5, 2014 at 7:29
1 Answer
Reset to default 2You have an illegal invisible character after your toggle function. When pasted into jsfiddle it's visible: http://jsfiddle/7m5Sb/
It's right after the last }