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, Dec 17 '16 at 14:19
Why do you mix jQuery syntax with `getElementById` and stuff...? — trincot, Dec 17 '16 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.](http://stackoverflow.com/a/21975639/6006586) — Robin B, Dec 17 '16 at 14:40
@trincot why do you think I shouldn't mix Jquery and getElementById? — Dema, Dec 17 '16 at 23:30
There is no issue in mixing the two in terms of functionality, but one of the reasons to use jQuery is that it makes selection of DOM elements so much easier, so it is strange to then still revert to the lengthy expressions like `getElementById('myid')`, when jQuery offers `$('#myid')` with all the advantages attached to it, like chaining. — trincot, Dec 18 '16 at 09:27

score 1 · Accepted Answer · answered Dec 17 '16 at 15:21

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 '16 at 15:21

dikkini

1,184
1
23
52

1

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`. – Barmar Dec 18 '16 at 17:13
@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! – Urasquirrel Sep 10 '20 at 23:27

Setting a new onclick attribute with javascript doesn't work

1 Answers1