Setting a new onclick attribute with javascript doesn't work

Question

I'm setting up the the webpage so that, at a certain width, the right side sliding menu will become a top to bottom sliding menu. To do so, I've used javascript to change the onclick attribute of the buttons but still the webpage keeps on working like before, with a right to left sliding effect. I attach the code related to the menu.

html:

<div id="header">
    <header id="title">
        <h1>The Nest</h1>
        <p id="para">The hostel where your journey should start</p>
        <button type="button" class="btn btn-lg" id="menu-btn" onclick="openSide()">
            <span class="glyphicon glyphicon-list"></span>
        </button>
    </header>
</div>

<div id="sidebar">
    <a href="javascript:void(0)" id="close-btn" onclick="closeSide()">&times;</a>
    <a href="#">Accomodations</a>
    <a href="#">Services</a>
    <a href="#">Merchandising</a>
    <a href="#">About us</a>
</div>

javascript & jQuery:

var main = function() {


$(window).resize(function() {

  var width = $(window).width();

  if (width < 1023) {

      document.getElementById("para").innerHTML = "Barcellona fine stay";

      $("#menu-btn").click(function() {
         $("#para").fadeOut("fast");
         $("#menu-btn").fadeOut("fast");
         });

      $("#close-btn").click(function() {
         $("#para").fadeIn("slow");
         $("#menu-btn").fadeIn("slow");
         });
  }    

  else if (width > 1024) {

      document.getElementById("para").innerHTML = "The hostel where your journey should start";

  }

  else if (width < 380) {

      document.getElementById("menu-btn").onclick = function() { openTop(); };
      document.getElementById("close-btn").onclick = function() { closeTop(); };

      $("#menu-btn").click(function() {
         $("#header").fadeOut("fast");
         });

      $("#close-btn").click(function() {
         $("#header").fadeIn("slow");
         });

  }    

  return true;

 });

}

$(document).ready(main);

I've just added the whole if/else statement because it seems that the whole last "else if" it doesn't work

Why not just check the width inside the event handlers, instead of trying to replace them — adeneo
– adeneo, Commented Dec 17, 2016 at 14:19
Why do you mix jQuery syntax with getElementById and stuff...? — trincot
– trincot, Commented Dec 17, 2016 at 14:34
I would suggest to remove the inline event handling in your HTML and do everything in the event handlers of your JS file, if you really want to keep the onclick in HTML, do everything in that function but I don't recomend that. Inline event handling sometimes result in weird bugs. Click here for more information. — Robin B
– Robin B, Commented Dec 17, 2016 at 14:40

dikkini · Accepted Answer · 2016-12-17 15:21:40Z

1

Try to change this:

$("#menu-btn").click(function() {
    $("#header").fadeOut("fast");
});

to this

$("body").on('click', '#menu-btn', function() {
    $("#header").fadeOut("fast");
});

It should helps, because Jquery method click does not work on dynamic elements, which were added after DOM is ready and parsed.

answered Dec 17, 2016 at 15:21

dikkini

1,1921 gold badge23 silver badges54 bronze badges

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

2 Comments

Barmar Over a year ago

There's nothing in the question that says that he's adding elements dynamically. If he were doing that, document.getElementById("menu-btn").onclick = function() { openTop(); }; would get an error because it would try to access the onclick property of null.

Urasquirrel Over a year ago

@Barmar Wow I can't believe I never noticed this glaringly large difference between the two api's. the default is to error on null, the other protects against and ignores null as an option completely. I think I prefer the error here in some cases. Thanks!

Collectives™ on Stack Overflow

Setting a new onclick attribute with javascript doesn't work

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related