Click on li with specific "rel" : Pure javascript, no jquery

Question

I have to do a fully JavaScript (jQuery forbidden) script. I only can use the 'click()' function.

I have to simulate a click on a "li" which has a random attribute for a sneakers website.

For showing you :

1. The user click on a "mega menu" which display (on the click) the different sizes.
2. The user choose his size in that menu

I show you the "code" of the html big menu. On this article, "LZAE31" is the ID product.

<ul class="theUlClass" style="display:none">
    <li class="theLiClass" rel="LZAE31:40">EU 40</li>
    <li class="theLiClass" rel="LZAE31:41">EU 41</li>
    <li class="theLiClass" rel="LZAE31:42">EU 42</li>
    <li class="theLiClass" rel="LZAE31:43">EU 43</li>
</ul>

Imagine that the user has already buy something on the website, and his size is 42 EU. The script is 90% ok (the part that the user has already buy something), but now i need to "simulate" a click.

For exemple, the end of the script works and it is :

document.getElementsByClassName("addtocart")[0].click();

So I really need you, to understand how can i click on the "rel="RANDOM:42" in the li.TheLiClass for exemple...

Answer 1

Try with:

First select element:

With Selector:

document.querySelector("[rel='LZAE31:40']")
// try like: console.log(document.querySelector("[rel='LZAE31:40']"));

Or with this function :

function specificRel( rel )
{
    var items = document.getElementsByTagName('li');
    for (var i=0; i<items.length; i++) {
        if (items[i].getAttribute("rel") == rel) {
            return items[i];
        }
    }
}
// try like: console.log(specificRel("LZAE31:40"));

And two, click :

With selector:

document.querySelector("[rel='LZAE31:40']").click();

Or with the function:

specificRel("LZAE31:40").click();

Answer 2

It's a tad bit unclear what you're asking, but I'll give it a shot. To get the LI element with rel=LZAE31:43 is trivial.

for( var a= document.getElementsByTagName('li'),i= 0; i < a.length; ++i )
  if( a[i].getAttribute('rel') == 'LZAE31:43' )
    break;