Retrieve unique value of a button

Question

I have several buttons belonging to the same class. I want to retrieve the value of the button I click on.

Here is my code:

var battons = document.getElementsByClassName("converting_video");
var number_of_buttons = battons.length;

function actual_url() {
  while (number_of_buttons > 0) {
    for (i = 1; i <= number_of_buttons; i++) {
      function getting_url() {
        battons[i].addEventListener("click", video_url)
      }

      function video_url(url) {
        alert(url);
      }
    }
  }
}


var battons = document.getElementsByClassName("class_btns");
var number_of_buttons = battons.length;

function actual_url() {
  while (number_of_buttons > 0) {
    for (i = 1; i <= number_of_buttons; i++) {
      function getting_url() {
        battons[i].addEventListener("click", video_url)
      }

      function video_url(url) {
        alert(url);
      }
    }
  }
}

<button class="class_btns" value='1'> results </button>
<button class="class_btns" value='2'> results </button>
<button class="class_btns" value='3'> results </button>
<button class="class_btns" value='4'> results </button>

Answer 1

This will allow you to get the value of any of the buttons clicked. Using jQuery's .click() event handler and $(this).val() will allow the value of the clicked button to be the value in the alert. Not sure what you are actually looking for with video_url etc, but this should point you in the right direction. You can then use the value from the click to do pass to your function rather than jusrt alerting i eg: ... video_url(btnVal) ...

$(document).ready(function(){
  $('.class_btns').click(function(){
     var btnVal = $(this).val();
     alert(btnVal);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="class_btns" value='1'>results</button>
<button class="class_btns" value='2'>results</button>
<button class="class_btns" value='3'>results</button>  
<button class="class_btns" value='4'>results</button>