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

I think instead of using jquery you should use this function. 'var text;function $(text){return(document.querySelector(text));}' — Shrikantha Budya
– Shrikantha Budya, Commented May 17, 2016 at 7:21

gurvinder372 · Accepted Answer · 2016-05-17 07:16:41Z

2

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";

answered May 17, 2016 at 7:16

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harshil Shah Over a year ago

Thanks. It worked. Can you tell me converting it into JQuery is good or not ? according to me javascript doesn't work fine in all browser while JQuery don't have that problem and many other advantages.

JAIGANESH · Accepted Answer · 2016-05-17 07:21:08Z

    <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>

Velimir Tchatchevsky · Accepted Answer · 2016-05-17 07:16:52Z

0

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

answered May 17, 2016 at 7:16

Velimir Tchatchevsky

2,8401 gold badge18 silver badges21 bronze badges

Comments

Dhara Parmar · Accepted Answer · 2016-05-17 07:18:12Z

0

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>

answered May 17, 2016 at 7:18

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

1 Comment

Harshil Shah Over a year ago

If i remove click event how it will call function. What i am doing here is when i click on open it will open an navigation sidebar menu. and removing click event won't do that. That's what i believe.

brk · Accepted Answer · 2016-05-17 07:23:26Z

0

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

answered May 17, 2016 at 7:23

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Jakob Christensen · Accepted Answer · 2016-05-17 09:19:21Z

0

Try removing opennav:

<script type="text/javascript">
    $('#sp1').click(function() {
        $('#mySidenav').css('width', "250px");
        $('#main').css('marginLeft', "250px");
    })
</script>

edited May 17, 2016 at 9:19

Jakob Christensen

15k2 gold badges53 silver badges82 bronze badges

answered May 17, 2016 at 7:16

Wajih

4,4152 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Error while converting javascript code to jquery code

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related