How to Choose a Text within a Div with same class but multiple divs

Question

I need your help please. In getting something work, I've tried pulling up information from feeds and blog, yet it's not trusted. Here is my code...

<div class="select_obj">
    <h4>Promote Channel</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on App</h4>
</div>
...
<div class="select_obj">
    <h4>Get Video View</h4>
</div>

How To select and Get the text within the clicked on h4. I Just don't know how to start, Please I need y'all help. Thanks.

Answer 1

Using javascript

function getTxt(x){
    alert(x.innerHTML);  
}

<div class="select_obj">
    <h4 onclick="getTxt(this);">Promote Channel</h4>
</div>
<div class="select_obj">
    <h4 onclick="getTxt(this);">Increase Conversion on Site</h4>
</div>
<div class="select_obj">
    <h4 onclick="getTxt(this);">Increase Conversion on App</h4>
</div>
...
<div class="select_obj">
    <h4 onclick="getTxt(this);">Get Video View</h4>
</div>

A simple solution using jquery

$(".select_obj").click(function(){
    //to get the content  
    var txt=$(this).children("h4").text();
    alert(txt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_obj">
    <h4>Promote Channel</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on App</h4>
</div>
...
<div class="select_obj">
    <h4>Get Video View</h4>
</div>

Answer 2

Using jQuery you can do like this

$('h4').on('click',function(event){
alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_obj">
  <h4>Promote Channel</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on App</h4>
</div>
<div class="select_obj">
  <h4>Get Video View</h4>
</div>

Using native javascript

var getAllH4 = document.querySelectorAll('h4');
getAllH4.forEach(function(item, index) {
  (function(item, i) { // creating closure
    item.addEventListener('click', function() {
      alert(item.textContent);
    });
  }(item, index))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_obj">
  <h4>Promote Channel</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on App</h4>
</div>
<div class="select_obj">
  <h4>Get Video View</h4>
</div>