I have a list of buttons with the same class name but different inner text, how do I get the value of the text on click?

Question

My list is being populated with this block of code:

function addToHistory(cityName) {
  let searchHistory = JSON.parse(localStorage.getItem("Weather Search History")) || [];
  searchHistory.push(cityName);
  localStorage.setItem("Weather Search History", JSON.stringify(searchHistory));
};
function updateHistory() {
  let searchHistory = JSON.parse(localStorage.getItem("Weather Search History")) || [];
  $("#searchHistory").html(searchHistory
    .map(searchHistoryList => {
      return (`<li><button class="btn btn-link"> ` + searchHistoryList + `</button></li>`);
    })
    .join(""));
};

and that works great. It pulls from an array in local storage that is created each time the user enters a search term. Then populates the site's sidebar with said list. However, I'm not sure how to then take the text values of the buttons out so that I may manipulate it.

Currently have:

$('#searchHistory').on('click', function () {
console.log($(???).val());
});

Answer 1

You want.text() or innerText (plain JavaScript). this refers to the current element. You can also use event.target.

$('#searchHistory').on('click', function () {
console.log($(this).text());
});

Answer 2

Try this in your function:

console.log($(this).innerHTML());

"this" refers to the specific element that triggered the click event.