How do I add a class with Javascript to a auto-generated Joomla menu child item 'li' within specific div?

Question

I am working on a template using Bootstrap 4 for Joomla 4. The main menu structure at different levels (parent, child, deeper, etc) is defined within the mod_menu php files. I have placed the same (main site) menu in two positions: one for mobile devices (#sidenav) and one for desktop view (#mainmenu).

The li items at child level that act as a divider/header for the next level in the menu (e.g. the item 'More information' but not 'Top Level item') have the class .dropdown-submenu applied from the mod_menu/default_separator.php file.

The sidenav displays as I would like (see pic: ), but in the mainmenu div (i.e. desktop/large tablet view) I would like the second and any following level dropdowns to be 'dropright'.

When I add the class using the Firefox inspector, it works perfectly, so to make this happen automatically I need to add a class using Javascript to change it from this:

    <li class="dropdown-submenu">

to this, by adding the Bootstrap class 'dropright', so that the little caret points to the right instead of down:

<li class="dropdown-submenu dropright">

As you can see above, when I add the class using the Firefox inspector, it works perfectly, so I am trying to add some javascript to user user.js make it work automatically.

I have tried adding various bits of code but none have any effect:

  function dropRight() {
  var element = document.getElementById('mainmenu');
  var elements = document.getElementsByClassName('.dropdown-submenu');
  elements.classList.add("dropright");
}

and

    function dropRight() {
    var element = document.getElementById('mainmenu');
    var ul = document.getElementsByClassName("dropdown-menu");
    var li = ul[0].getElementsByClassName("dropdown-submenu"); 
    for ( var i = 0; i < li.length; i++ ){
    var class = li[i].className += " dropright";
}

The following pieces of code don't work either, but even if they did, they'd add the class to the sidenav as well, which I don't want to happen, so I need to select id 'mainmenu':

    function dropRight() {
    var elements = document.getElementsByClassName('dropdown-submenu');
    elements[0].className += " dropright";
    }

or

    function dropRight() {
    var elements = document.getElementsByClassName('.dropdown-submenu');
    elements.classList.add("dropright");
}

I searched the web all day yesterday for answers and have tried numerous other combinations to no avail. Javascript is definitely not my forté, so any help is gratefully received.

Answer 1

I found the answer:

window.onload = function(){dropRight()};
function dropRight() {
    var x = document.getElementById("mainmenu").querySelectorAll("li.dropdown-submenu");
x[0].className += " dropright";
}