onclick event pass <li> id or value

Question

I want to pass <li> id or value in onclick event. here is my exiting code.

<li onclick="getPaging(this.value)" id="1" value="1">1</li>
<li onclick="getPaging(this.value)" id="2" value="2">2</li>

here is the javascript code

function getPaging(str)
{
$("#loading-content").load("dataSearch.php?"+str, hideLoader);
}

Mariomariology

If you're going to use jQuery, there is no excuse/reason to have javascript in your markup. All of your events should be attached outside of the HTML. – Ressler

@JustinJohnson But why? using onclick seems much more natural and convenient. – Diacetylmorphine

@nickes TLDR: because of separation of concerns. Here's a couple reasons off the top of my head. Intermingling behavior (JS) with content (HTML) might seem convenient, but in projects of non-trivial size, it quickly becomes a detriment. It creates a mess when attaching event handlers of multiple types. It often forces you into storing state in the DOM. https://mcmap.net/q/41323/-why-is-using-onclick-in-html-a-bad-practice/126562 – Ressler

Answer 1

Try like this...

<script>
function getPaging(str) {
  $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
</script>

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>

or unobtrusively

$(function() {
  $("li").on("click",function() {
    showLoader();
    $("#loading-content").load("dataSearch.php?"+this.id, hideLoader);
  });
});

using just

<li id="1">1</li>
<li id="2">2</li>

Tamalatamale

Thanks for the answer. However, I would look into using HTML data-* Attributes instead of "id". – Plumbing

Answer 2

<li>s don't have a value - only form inputs do. In fact, you're not supposed to even include the value attribute in the HTML for <li>s.

You can rely on .innerHTML instead:

getPaging(this.innerHTML)

Or maybe the id:

getPaging(this.id);

---

However, it's easier (and better practice) to add the click handlers from JavaScript code, and not include them in the HTML. Seeing as you're already using jQuery, this can easily be done by changing your HTML to:

<li class="clickMe">1</li>
<li class="clickMe">2</li>

And use the following JavaScript:

$(function () {
    $('.clickMe').click(function () {
        var str = $(this).text();
        $('#loading-content').load('dataSearch.php?' + str, hideLoader);
    });
});

This will add the same click handler to all your <li class="clickMe">s, without requiring you to duplicate your onclick="getPaging(this.value)" code for each of them.

Hutton

Answer 3

I prefer to use the HTML5 data API, check this documentation:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• https://api.jquery.com/data/

A example

$('#some-list li').click(function() {
  var textLoaded = 'Loading element with id='
         + $(this).data('id');
   $('#loading-content').text(textLoaded);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='some-list'>
  <li data-id='1'>One </li>
  <li data-id='2'>Two </li>
  <!-- ... more li -->
  <li data-id='n'>Other</li>
</ul>

<h1 id='loading-content'></h1>

Aliaalias

Answer 4

Try this:

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>


function getPaging(str)
{
    $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}

Nahamas