Javascript click function is not working on first click

Question

I have created a function that adds an active class on click its works fine but it's not adding an active class on the first click on the second click its start working fine. here is my code

  function howAppWorks($imgUrl, $myClass, event) {
                document.getElementById('myImage').src = $imgUrl;
                document.getElementById("howTheAppContent").classList.remove('addEvent', 'fillTheForm', 'rrtFlowSheet');
                document.getElementById("howTheAppContent").classList.add($myClass);
    
                // Add active class to the current button (highlight it)
                var header = document.getElementById("appWorksList");
                var btns = header.getElementsByClassName("custom-class");
    
                for (var i = 0; i < btns.length; i++) {
                    btns[i].addEventListener("click", function() {
                        var current = document.getElementsByClassName("active");
                        current[0].className = current[0].className.replace(" active", "");
                        this.className += " active";
                    });
                }
    
            }

<div class="row">
        <div class="col-md-6">
            <div class="content">
                <div class="howTheAppWorksContent addEvent" id="howTheAppContent">
                    <img id="myImage" src="http://localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png" alt="">
                </div>
            </div>
        </div>
        <div class="col-md-6" id="appWorksList">
            <table>
                <tr class='custom-class active' id="addEvent" onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png', 'addEvent')">
                    <td>1</td>
                </tr>
                <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/fill-the-forms.png', 'fillTheForm')">
                    <td>2</td>
                </tr>
                <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/rrt-flow-sheet.png', 'rrtFlowSheet')">
                    <td>3</td>
                </tr>
            </table>
        </div>
    </div>

What have you tried to resolve the problem? Why don't you bind the handlers initially if you don't want to bind them after the first click? — Nico Haase
– Nico Haase, Commented Nov 25, 2021 at 8:23

Ahmad Habib · Accepted Answer · 2021-11-25 08:21:30Z

The problem is in your logic. You are calling an onclick and then in that onclick you are registering an event on the same buttons. It is better to do one thing, or simply take out event listener outside the howAppWorks function. Like this:

function howAppWorks($imgUrl, $myClass, event) {
  document.getElementById('myImage').src = $imgUrl;
  document.getElementById("howTheAppContent").classList.remove('addEvent', 'fillTheForm', 'rrtFlowSheet');
  document.getElementById("howTheAppContent").classList.add($myClass);

  // Add active class to the current button (highlight it)


}
var header = document.getElementById("appWorksList");
var btns = header.getElementsByClassName("custom-class");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.active {
  background: blue;
}

<div class="row">
  <div class="col-md-6">
    <div class="content">
      <div class="howTheAppWorksContent addEvent" id="howTheAppContent">
        <img id="myImage" src="http://localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-md-6" id="appWorksList">
    <table>
      <tr class='custom-class active' id="addEvent" onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png', 'addEvent')">
        <td>1</td>
      </tr>
      <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/fill-the-forms.png', 'fillTheForm')">
        <td>2</td>
      </tr>
      <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/rrt-flow-sheet.png', 'rrtFlowSheet')">
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

Working Fiddle

Collectives™ on Stack Overflow

Javascript click function is not working on first click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related