Error while converting javascript code to jquery code
Question
i have following code where openNav function is called.
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span id="sp1" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
i have Javascript code which works fine
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
i tried to convert it in jquery but it shows error openNav is not defined.
<script type="text/javascript">
$('#sp1').click(function openNav() {
$('#mySidenav').style.width = "250px";
$('#main').style.marginLeft = "250px";
})
</script>
It compiles and run properly but when i click on open (onclick event) it throws an exception that openNav is undefined.
Please explain what is the problem ? thanks
6 answers
solution1
2 ACCPTED 2016-05-17 07:16:41
Pure jQuery - You need to use the css method
$('#mySidenav').css( "width", "250px" );
$('#main').css( "margin-Left", "250px");
Your approach - Or simply access the DOM element from jquery object using [0] index
$('#mySidenav')[0].style.width = "250px";
$('#main')[0].style.marginLeft = "250px";
solution2
1 2016-05-17 07:21:08
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span id="sp1" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script type="text/javascript">
function openNav() {
$('#mySidenav').css( "width", "250px" );
$('#main').css( "margin-Left", "250px");
}
</script>
</body>
</html>
solution3
0 2016-05-17 07:16:52
Change
<script type="text/javascript">
$('#sp1').click(function openNav() {
$('#mySidenav').style.width = "250px";
$('#main').style.marginLeft = "250px";
})
</script>
To:
<script type="text/javascript">
$('#sp1').click(function(){
$('#mySidenav').css({"width":"250px"});
$('#main').css({"magin-left":"250px"});
})
</script>
And remove the onclick attribute from your html its obsolete in this approach
solution4
0 2016-05-17 07:16:55
Try removing opennav :
<script type="text/javascript">
$('#sp1').click(function() {
$('#mySidenav').css('width', "250px");
$('#main').css('marginLeft', "250px");
})
</script>
solution5
0 2016-05-17 07:18:12
If you want to use jquery, remove on click function from html:
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span id="sp1" style="font-size:30px;cursor:pointer">☰ open</span>
</div>
Jquery:
<script type="text/javascript">
$('#sp1').click(function() {
$('#mySidenav').css('width','250px');
$('#main').css('margin-left','250px');
});
</script>
solution6
0 2016-05-17 07:23:26
If you use $('#sp1').click(function openNav() { ..}) you may see an error openNav is not defined
function openNav() {
$('#mySidenav').css( "width", "250px" );
$('#main').css( "margin-Left", "250px");
}
Check this jsFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.