Button rotation is not working on every click - Pure JavaScript

Question

I have a div element like below:

<div id="showHideSideBar">
    <button class="btn btn-sm btn-primary mx-2" id="showSideBar" onclick="myFunction()">
    <i class="data-feather" data-feather="chevrons-right"></i>
    </button>
</div>

And with in the same document, I have my JavaScript as per following:

<script type="text/javascript">
        function myFunction() {
            var content = document.getElementById("showHideSideBar");
            var btn = document.getElementById("showSideBar");
            var rot = 180;
            btn.addEventListener("click", function() {
                content.style = 'transform: rotate(' + rot + 'deg)';
                rot += 180;
            });
        }
</script>

For above, I got the help from this thread.

Problem: When I click the button first time, there is no rotation at all. Second click flips it 180 degrees. Now third click onwards results in no rotation at all again. If someone needs a full look at the entire html, its here.

Expected: On every click the button should rotate 180 degrees.

What I am missing here?

`myFunction()` doesn't perform the rotation, it just adds an event listener that does it the next time you click. You don't need that, since you have `onclick` in the element. — Barmar, Jan 11 '21 at 19:51
And every time you call `myFunction()`, it adds another event listener, so the next time it runs the code twice, then 3 times, etc. — Barmar, Jan 11 '21 at 19:52

Ofir Baruch · Accepted Answer · 2021-01-11T20:30:17.610

Your function is being called only after the button is being clicked: onclick="myFunction()".

And in the function itself you don't trigger the rotation, you just add an Event Listener, therefore - the rotation itself doesn't really happen.

Consider removing the "onclick" attribute and simply call the function.

HTML

<button class="btn btn-sm btn-primary mx-2" id="showSideBar"> // removed this: onclick="myFunction()"

JS

<script type="text/javascript">
        function myFunction() {
            var content = document.getElementById("showHideSideBar");
            var btn = document.getElementById("showSideBar");
            var rot = 180;
            btn.addEventListener("click", function() {
                content.style = 'transform: rotate(' + rot + 'deg)';
                rot += 180;
            });
        }

myFunction();
</script>

score 1 · Answer 2 · answered Jan 11 '21 at 19:54

Since you are rotating 180 degrees each time, the simplest method would be to toggle a class that sets the rotation to 180 degrees.

var content = document.getElementById("showHideSideBar");
function myFunction() {
  content.classList.toggle('rotate');
}

.rotate {
  transform: rotate(180deg);
}

<div id="showHideSideBar">
    <button class="btn btn-sm btn-primary mx-2" id="showSideBar" onclick="myFunction()">
    <i class="data-feather" data-feather="chevrons-right"></i> Rotate
    </button>
</div>

Button rotation is not working on every click - Pure JavaScript

2 Answers2