Strange behavior of button onclick

Question

Im currently working on a project and I have some trouble with my navbar.

I have two buttons there in a dropdown:

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
   <button class="dropdown-item all" id = "my_all" onclick = "showApplied()">Angemeldet</button>
   <button class="dropdown-item off" id = "empty" onclick = "switchShowAllEmpty()">Leere Aktivitäten einblenden</button>
</div>

The second button works fine, but when I click the first one nothing happens. When I change the over button "empty" still is working and button "my_all" not. BUT when I manipulate the copy inside the browser by copying the first button and pasting it in the dropdown again, the pasted one works although the origional didn't.

To my this just makes no sense. And the onclick-function also works fine, so this is not the problem. Please let me know if someone has an idea what's the problem.

Answer 1

The problem in your code lies at line number #143 inside showAll() function.

function showAll(){
        document.getElementById("my_all").onclick = "showApplied()";

You are trying to give a string value (which is function text) to onclick property rather than a function definition. You can remove that because anyways you have applied onclick event to the button in HTML.

Anyway if you really want it there then,

You can try document.getElementById("my_all").onclick = showApplied

You can refer onclick property docs here . You can also try an see working example here .