javascript - How to get value of selected element? -

i have multi level buttons such select 1 of button in level 1 , want show button in next level.

now, want value of button selected javascript code. below code. bring code show multi level buttons:

<script type="text/javascript">  var menuarray = ['0'];    $(function () {      $('.showbutton').click(function () {          //get target div show          var targetid = $(this).attr('target');                    //hide divs          $('.targetdiv').hide();                    //show menu items in chain          var found = false;                    //get containing div target number          var current = $(this).parent().attr('id').tostring().charat(3);          var length = menuarray.length;                    //remove elements of array lower clicked button          for(var i=0; i<length; i++) {              //check if next menu item button pressed , never delete root menu (elem == 0)              if(menuarray[0] == current || menuarray[0] == 0) {  			$(this).addclass('selected').siblings().removeclass('selected');                  found = true;              }              //hide div if no longer in menu structure , remove menuarray[0]              if(!found) {                  $('#div' + menuarray[0]).hide();                  menuarray.shift();              }          };                    //add new target beginning of array          menuarray.unshift(targetid);                    //show each element in menu structure          menuarray.foreach(function(elem, index) {              if(index != 0) {                  $('#div' + elem).show();              }          });                    //get div of target show sliding effect          var targetdiv = $('#div' + menuarray[0]);                    //show div last element on page          targetdiv.insertafter('#div' + menuarray[1]);                    //slide out last div          targetdiv.show('slide');  		      });  	   });  </script>

<div id="div0" class="buttons">      <div class="showbutton" target="1">a_level1</div>      <div class="showbutton" target="1">b_level1</div>      <div class="showbutton" target="1">c_level1</div>  </div>    <!-- div1 branch -->  <div id="div1" class="targetdiv">      <div class="showbutton" target="6">a_level2</div>      <div class="showbutton" target="6">b_level2</div>  	<div class="showbutton" target="6">c_level2</div>  </div>      <div id="div6" class="targetdiv">      <div class="showbutton" target="7">a_level3</div>      <div class="showbutton" target="8">b_level3</div>  	<div class="showbutton" target="9">c_level3</div>  </div>

what shall do?

inside anonymous function, inside $('.showbutton').click(function () { can access value $(this).text(); (or $(this).html(); if need html elements it).

see following example using method::

$('.showbutton').click(function(){    $('#log').val($(this).text());  });

.showbutton{    cursor:pointer;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="div0" class="buttons">      <div class="showbutton" target="1">a_level1</div>      <div class="showbutton" target="1">b_level1</div>      <div class="showbutton" target="1">c_level1</div>  </div>    <!-- div1 branch -->  <div id="div1" class="targetdiv">      <div class="showbutton" target="6">a_level2</div>      <div class="showbutton" target="6">b_level2</div>  	<div class="showbutton" target="6">c_level2</div>  </div>      <div id="div6" class="targetdiv">      <div class="showbutton" target="7">a_level3</div>      <div class="showbutton" target="8">b_level3</div>  	<div class="showbutton" target="9">c_level3</div>  </div>  <hr>  <textarea id='log'></textarea>