How to add to onclick function inside a list i.e<li onclick=“”><button onclick=“”></button></li>

Question

Basically, I want to create a sidebar in which there will be many contacts. Each contact will be there inside a list. There will be two onclick functions inside a list. In list two onclick functions are: 1st onclick- After clicking on the list <li onclick=""></li> It should open another sidebar(I have created it). 2nd onclick-This onclick is inside <button> ie <li onclick=""><button onclick=""></button></li> After clicking on this onclick a new chatbox(almost done) should open. But in my case whenever I click on any list inside the sidebar, it display's both sidebar and chatbox simultaneously. I want both onclick functions to work separately.

html code:

<ul class="list mat-ripple">      
  <li ><img src="img1.png"><span class="name"> abc</span> 
     <button class="btn-link" style="margin-left:65px;color:green;font-size:15px;"> 
        <b>   
          <i class="fa fa-comments" aria-hidden="true"> </i>
        </b>
     </button>
  </li>
  <li>
    <img src="img1.png"><span class="name"> abc</span> 
    <button id="clickme" style="margin-left:65px;color:green;font-size:15px;"> 
     <b>   
       <i class="fa fa-comments" aria-hidden="true"> </i>

       </b>
     </button>
  </li>
  <li onclick="toggle_div_fun('sectiontohide');">
    <img src="img1.png"><span class="name"> abc</span> 
    <button  onclick="showFrontLayer();" style="margin-left:65px;color:green;font-size:15px;"> 
       <b>   
        <i class="fa fa-comments" aria-hidden="true"> </i> 
        </b>
    </button>
   </li>      
  </b>
  </button>
  </li>

  <li onclick="toggle_div_fun('sectiontohide');">
     <img src="img1.png"><span class="name"> abc</span> 
     <button onclick="showFrontLayer();" style="margin-left:65px;color:green;font-size:15px;"> 
       <b>   
          <i class="fa fa-comments" aria-hidden="true"> </i>
       </b>
     </button>
  </li>

</ul> 

1st oclick function inside list needs to target below code( 2nd sidebar that needs to toggle using onclick function):

Contact List Sachin Sir

Sachin Sir

Sachin Sir

Sachin Sir

After 2nd Onclick function inside the button is targeting the below code(toggle):

 <div id="div1"> <div id="bg_mask"> <div id="frontlayer"><br/><br/><img src="https://png.icons8.com/go-back/androidL/24" title="Go Back" width="24" height="24" onclick="hideFrontLayer();" style="margin-top:-60px;position:absolute;margin-left:-20px;"> <div id='result'></div> <div class='chatcontrols'> <form method="post" onsubmit="return submitchat();"> <input type='text' name='chat' id='chatbox' autocomplete="off" placeholder="ENTER CHAT HERE" /> <input type='submit' name='send' id='send' class='btn btn-send' value='Send' /> <input type='button' name='clear' class='btn btn-clear' id='clear' value='X' title="Clear Chat" /> </form> </div> </div> </div> </div> 

javascript functions:

  <script> function showFrontLayer() { document.getElementById('bg_mask').style.visibility='visible'; document.getElementById('frontlayer').style.visibility='visible'; } function hideFrontLayer() { document.getElementById('bg_mask').style.visibility='hidden'; document.getElementById('frontlayer').style.visibility='hidden'; } </script> 

Is there any other code to toggle 2 targeted elements(sidebar and chatbox)? Both should be done inside a list

.

Answer 1

Given that you've tagged this with jQuery, I'm going to assume you have jQuery available.

You can attach click events with jQuery, $('button').click(function(){...}) .

So what you'd probably want to do is attach a click event that checks the state for certain features and, depending on those features, does different things.

For example, you could have it check for the class 'clicked', and if it doesn't have the class 'clicked', expand your second sidebar and add the class 'clicked', and if it does have the class 'clicked' you do the second click function you want it to do.

Of course depending on the specifics of the desired behavior you may want to check for and change state in a different way than adding the class 'clicked', but that's just one approach.

Answer 2

you can simply use onclick event using jquery like this

$(document).ready(function(){
    $('button').click(function(){
        <!---Your Code-->
    });
});

Answer 3

the problem is about understanding event handling in Javascript. You have a list element with an click event. This List Element contains a button, which has a click event too. This means, when you click on the list item you trigger 2 events (that's why you see the two divs). I think you can solve this by using event.stopPropagation() in your showFrontLayer and HideFrontLayer functions, in order to prevent the event target from bubbeling to the list item.

function showFrontLayer(evt) {
   evt.stopPropagation();
   document.getElementById('bg_mask').style.visibility='visible';
   document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer(evt) {
  evt.stopPropagation();
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

For more infos about event capturing and bubbeling see: https://javascript.info/bubbling-and-capturing

Answer 4

I'm guessing what you would need is:

event.stopPropagation();

This would prevent the event from button (which is inside) propagating to it's parent.

 $('#inner').click(event=>{ event.stopPropagation(); $('#other').toggle(); }); $('#outer').click(event=>{ console.log("outer"); }); 

 #outer { background-color: blue; width: 100px; height: 100px; padding-top: 50px; } #other { background-color: red; width: 100px; height: 100px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outer"> <button id="inner">Toggle Visibility</button> </div> <div id="other"> This div has to be toggled on click of the button </div>