How to make jQuery click a random li element on page load?

Question

I would like to trigger a .click handler on a random team of my list.

I tried the following code, but it doesn't work:

$(document).ready(function(){
    $('#sidebar li:nth-child() a').click();
});

Also tried:

Click trigger on page load (UL > LI)
Auto-click button element on page load using jQuery

        <li class="countries" id="2"><img src="{% static "images/england.png" %}" alt="england">Premier League
          <ul class="subbar">
            <li><a class="team" id="12">FC Liverpool</a></li>
            <li><a class="team" id="13">Manchester City</a></li>
            <li><a class="team" id="17">Tottenham Hotspur</a></li>
            <li><a class="team" id="14">Manchester United</a></li>
            <li><a class="team" id="11">Leicester City</a></li>
            <li><a class="team" id="6">FC Chelsea</a></li>
            <li><a class="team" id="2">FC Arsenal</a></li>
            <li><a class="team" id="1">AFC Bournemouth</a></li>
            <li><a class="team" id="19">West Ham United</a></li>
            <li><a class="team" id="16">FC Southapmton</a></li>
            <li><a class="team" id="8">FC Everton</a></li>
            <li><a class="team" id="7">Crystal Palace</a></li>
            <li><a class="team" id="5">Cardiff City</a></li>
            <li><a class="team" id="4">FC Burnley</a></li>
            <li><a class="team" id="9">Fulham</a></li>
            <li><a class="team" id="3">Brighton & Hove Albion</a></li>
            <li><a class="team" id="15">Newcastle United</a></li>
            <li><a class="team" id="10">Huddersfield Town</a></li>
            <li><a class="team" id="20">Wolverhampton Wand.</a></li>
            <li><a class="team" id="18">FC Watford</a></li>
          </ul>
        </li>

Try using [`Math.random()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) — freefaller, Oct 11 '19 at 16:15
Instead of `.click()` you should use `.trigger("click")` But that isn't going to work, as the selector won't return any valid items. You need to generate a random value based on the number `li` items, create a selector string using that random value, and then trigger on that result — freefaller, Oct 11 '19 at 16:26
Like so? ```randomID = function getRandomInt(min, max) { min = Math.ceil(0); max = Math.floor(20); return Math.floor(Math.random() * (max - min)) + min; }; $(document).ready(function(){ $(''#randomID'').trigger('click'); });``` — JSRB, Oct 11 '19 at 16:32

freefaller · Accepted Answer · 2019-10-11T16:43:36.583

Before I start, I should say that having a number as an id attribute is invalid in HTML. You can fix it by simply putting any characters before hand, for example id="a1".

You should use Math.random() to generate a random value, based on the number of li items in your list.

You can create a new selector by placing that random value in the nth-child part....

(Note, I originally said that instead of using .click() the OP should use .trigger("click"). That was wrong, and the docs clearly show that .click() is valid and simply a shortcut for .trigger("click").)

$(function(){
  $("a.team").on("click", function(e) {
    e.preventDefault();
    console.log($(this)[0].id + " - " + $(this)[0].innerHTML);
  });
  
  var numLi = $(".subbar li").length;
  var rnd = Math.floor(Math.random() * Math.floor(numLi)) + 1;
  $(".subbar li:nth-child(" + rnd.toString() + ") a").click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="subbar">
  <li><a class="team" id="12">FC Liverpool</a></li>
  <li><a class="team" id="13">Manchester City</a></li>
  <li><a class="team" id="17">Tottenham Hotspur</a></li>
  <li><a class="team" id="14">Manchester United</a></li>
  <li><a class="team" id="11">Leicester City</a></li>
  <li><a class="team" id="6">FC Chelsea</a></li>
  <li><a class="team" id="2">FC Arsenal</a></li>
  <li><a class="team" id="1">AFC Bournemouth</a></li>
  <li><a class="team" id="19">West Ham United</a></li>
  <li><a class="team" id="16">FC Southapmton</a></li>
  <li><a class="team" id="8">FC Everton</a></li>
  <li><a class="team" id="7">Crystal Palace</a></li>
  <li><a class="team" id="5">Cardiff City</a></li>
  <li><a class="team" id="4">FC Burnley</a></li>
  <li><a class="team" id="9">Fulham</a></li>
  <li><a class="team" id="3">Brighton & Hove Albion</a></li>
  <li><a class="team" id="15">Newcastle United</a></li>
  <li><a class="team" id="10">Huddersfield Town</a></li>
  <li><a class="team" id="20">Wolverhampton Wand.</a></li>
  <li><a class="team" id="18">FC Watford</a></li>
</ul>

rnd number generates smoothly, but there still is no trigger action going on. I don't get any errors either when debugging. Fixed it, lol someone slap me. Thanks mate — JSRB, Oct 11 '19 at 16:43
I've just updated my answer, as I was wrong about the `.click()`... it **should** work, if it doesn't, then there is something else wrong in your code which is impossible for me to know about — freefaller, Oct 11 '19 at 16:44

How to make jQuery click a random li element on page load?

1 Answers1