Category: javascript

Hello I have this Problem
I dont now how can code it
The Console.log output is: undefined
it would be helpful if someone could help me!

function GetJsonApi(url) {
let result;
    if (url.startsWith('http://')) {
        http.get(url, (res) => {
            let body = "";

            res.on("data", (chunk) => {
                body += chunk;
            });

            res.on("end", () => {
                try {
                    let json = JSON.parse(body);
                    var result = json;
                } catch (error) {
                    var result = error.message;
                };
            });

        }).on("error", (error) => {
            var result = error.message;
        });
    return result;
}
}


console.log(GetJsonApi('https://ipinfo.io/1.1.1.1/json'))

I’m new to JavaScript and my first project was to create a Unit Converter. All the functions for the converting are stored in an external js-File. If the user enters a value in an input field all the other input fields automatically output the converted values.

Link to my site: https://uc.jz-apps.ch

It perfectly works in Firefox, Chrome and Edge but unfortunately not in Safari. It seems the js-File is not loading. I checked the console output in Safari using crossbrowsertesting.com and it seems the file is not loading due to an “invalid” regular expression.

Console output:

SyntaxError: Invalid regular expression: invalid group specifier name (anonymous function) – functions.js:64

I use a function to “clean” the converted values before outputting them, like searching and replacing NaN values and also add a thousand seperator (‘) which is based on the regular expression mentioned in the console output.

Here is the code of my function:

function cleanValues(value) {
    const formatNum = num =>
        String(num).replace(/(?<!..*)(d)(?=(?:d{3})+(?:.|$))/g, "$1'");

    if (isNaN(parseFloat(value))) {
        value = "";
    }

    return formatNum(value);
}

And here is an example of calling the function when calculating the values:

fahrenheit.value = cleanValues((fieldValue * 1.8) +32);

I’m not familiar yet with regular expressions so I just copied it from another stackoverflow user. I have no idea if it’s valid but it does what it should do in Firefox, Chrome and Edge.

What could be the problem with Safari? I’m thankful for every idea and workaround to fix my code/regexp to make it work in Safari as well.

Detailed description of the app for a Restaurant order taking.LAN with a server PC, where I have my own “http-server” (written in Delphi).The user is a waiter, using a smartphone. The icon on the smartphone simply connects to IP+Port of the PC. The ‘http-server’ on the PC on first connection sends a full html page as response. The page stays for the whole duration of the session. 
The html downloaded to the smartphone contains a login DIV, and then various DIV’s which will be populated with the response from the ‘http-server’ on the PC and hidden/shown accordingly.
The request in the html page is sent as POST. The server will create an html response according to the parameters sent in the POST request and the client will populate the appropriate DIV with it. There is only one user input, for a note. Whatever is written there is sent as is to the server which will return that text to be loaded in the appropriate DIV on the client side. I tried to see if this lent itself to malicious injections by writing “Alert(‘HACK’)” in it;. What happens is that the server responds by sending the string back and the client loads it literally as a note in the correct DIV. From my understanding this setup should be safe. Am I wrong? Perhaps there is some mysterious way a hacker (sitting where?? how would he be coming into play?) can still crash the app? Thank you for any elucidation.

I’m trying to make a Pac-Man game using javascript, and I would like the ghosts to be able to move using a pathfinding algorithm, because there’s only so much they can do otherwise. My issue is implementing it (and probably understanding). Would someone be able to provide an example of how to do what I want? Thanks.

I want to be able to do something along the lines of this: Move(ghost, Row, Col) and have the program move the ghost to it’s next tile based on the fact that is is trying to get to the target coordinates on the tile map (the target coordinates change often).

The tile map looks like this:

    /* * * * * * * * * * * * * * * * * * * * * 
    *                Map Key:                *
    *         1: Dots                        *
    *         2: Energizers                  *
    *         3: Walls                       *
    *         4: Air                         *
    *         5: Ghost Lair                  *
    *         6: Left Tunnel                 *
    *         7: Right Tunnel                *
    *                                        *
    * * * * * * * * * * * * * * * * * * * * */

map = 
    [
      [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
      [3,1,1,1,1,1,1,1,1,1,1,1,1,3,3,1,1,1,1,1,1,1,1,1,1,1,1,3],
      [3,1,3,3,3,3,1,3,3,3,3,3,1,3,3,1,3,3,3,3,3,1,3,3,3,3,1,3],
      [3,2,3,3,3,3,1,3,3,3,3,3,1,3,3,1,3,3,3,3,3,1,3,3,3,3,2,3],
      [3,1,3,3,3,3,1,3,3,3,3,3,1,3,3,1,3,3,3,3,3,1,3,3,3,3,1,3],
      [3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3],
      [3,1,3,3,3,3,1,3,3,1,3,3,3,3,3,3,3,3,1,3,3,1,3,3,3,3,1,3],
      [3,1,3,3,3,3,1,3,3,1,3,3,3,3,3,3,3,3,1,3,3,1,3,3,3,3,1,3],
      [3,1,1,1,1,1,1,3,3,1,1,1,1,3,3,1,1,1,1,3,3,1,1,1,1,1,1,3],
      [3,3,3,3,3,3,1,3,3,3,3,3,4,3,3,4,3,3,3,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,3,3,3,4,3,3,4,3,3,3,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,4,4,4,4,4,4,4,4,4,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,3,3,3,5,5,3,3,3,4,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,3,3,3,5,5,3,3,3,4,3,3,1,3,3,3,3,3,3],
      [6,4,4,4,4,4,1,4,4,4,3,3,5,5,5,5,3,3,4,4,4,1,4,4,4,4,4,7],
      [3,3,3,3,3,3,1,3,3,4,3,3,3,3,3,3,3,3,4,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,3,3,3,3,3,3,3,3,4,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,4,4,4,4,4,4,4,4,4,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,3,3,3,3,3,3,3,3,4,3,3,1,3,3,3,3,3,3],
      [3,3,3,3,3,3,1,3,3,4,3,3,3,3,3,3,3,3,4,3,3,1,3,3,3,3,3,3],
      [3,1,1,1,1,1,1,1,1,1,1,1,1,3,3,1,1,1,1,1,1,1,1,1,1,1,1,3],
      [3,1,3,3,3,3,1,3,3,3,3,3,1,3,3,1,3,3,3,3,3,1,3,3,3,3,1,3],
      [3,1,3,3,3,3,1,3,3,3,3,3,1,3,3,1,3,3,3,3,3,1,3,3,3,3,1,3],
      [3,2,1,1,3,3,1,1,1,1,1,1,1,4,4,1,1,1,1,1,1,1,3,3,1,1,2,3],
      [3,3,3,1,3,3,1,3,3,1,3,3,3,3,3,3,3,3,1,3,3,1,3,3,1,3,3,3],
      [3,3,3,1,3,3,1,3,3,1,3,3,3,3,3,3,3,3,1,3,3,1,3,3,1,3,3,3],
      [3,1,1,1,1,1,1,3,3,1,1,1,1,3,3,1,1,1,1,3,3,1,1,1,1,1,1,3],
      [3,1,3,3,3,3,3,3,3,3,3,3,1,3,3,1,3,3,3,3,3,3,3,3,3,3,1,3],
      [3,1,3,3,3,3,3,3,3,3,3,3,1,3,3,1,3,3,3,3,3,3,3,3,3,3,1,3],
      [3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3],
      [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
    ];

I’m honestly not expecting much from this post. This is more of a last attempt.
Thanks anyway to anyone who tries!

I am just looking into the javascript portion of this code and it will run when you click the button but I don’t get a return value. I’ve been attempting to fix this for hours now. The purpose of the code is to generate a random color from the list provided but when I type in any of the colors I get no return value. I tried to debug my cold and it doesn’t give me any errors that I could fix. Is there anything that you see wrong with my code?

<body>
<h1>Colors Guessing Game</h1>
<button type="button" onclick="runGame()">Start Game</button>
<script>
    const COLORS_ARRAY = ['blue', 'cyan', 'gold', 'gray', 'green', 'magenta', 'orange', 'red', 'white', 'yellow'];
    console.log(elements.join());

    function runGame() {
        let guess = "";
        let correct = false;
        let numTries = 0;

        const targetIndex = [Math.floor(Math.random() * COLORS_ARRAY.length - 1)];
        const target = COLORS_ARRAY[targetIndex];
        console.log(target);
        do {
            guess = prompt('I am thinking of one of these colors:nn' + COLORS_ARRAY + 'What color am I thinking ofn');
            guess = guess.toLowerCase();
            numTries += 1;
            if (guess == null) {
                alert('Have a great day!');
            }
            return "";
            
        } while (!correct);
        alert("Congrats! You got it" + target + " nnIt took you" + numTries + "tries to guess correctly");
        document.body.style.background = guess;

    }

    function checkGuess(guessNumber, target) {
        let correct = false;

        if (!(COLORS_ARRAY.indexOf(guess) == -1)) {
            alert('You have not entered a color from the listnnPlease choose a color from the before mentioned list.');
        } else if (guessNumber > target) {
            alert('Your choice is alphabetically higher than the color.');
        } else if (guessNumber < target) {
            alert('Your choice is alphabetically lower than the color.');
        } else {
            correct = true;
        }
        return correct;

    }
</script>

The issue

According to the W3C, the focusin event is supposed to fire before the element receives focus, and then the focus event is supposed to fire after. Instead, focusin fires after the element receives focus, and after focus fires.

How things are supposed to be

I have heard from multiple sources including the W3C UI spec (at the bottom of this page) that when an element receives focus, the focusin event fires before it receives focus, and the focus event fires after it receives focus, meaning the order of events when clicking into and then out of an input should look like this:

User clicks input
focusin event fires
input gains focus
focus event fires
User clicks off
focusout event fires
input loses focus
blur event fires

How things are

And yet in practice, it appears that they both fire after the element has received focus, and focus fires before focusin. Here’s some code I used:

<!DOCTYPE html>
<html>
<body>
<input id="i1" onfocus="f(event)" onfocusin="f(event)" onfocusout="f(event)" onblur="f(event)">
<script>
  const i = document.getElementById('i1');
  function f(event) {
    console.log(event.type + (document.hasFocus(i) ? ': focused' : ': NOT focused'));
  }
</script>
</body>
</html>

The log after clicking into and out of the input looks like this:

focus: focused
focusin: focused
blur: focused
focusout: focused

Which tells me that focusin is firing after the input gets focus, and not before, and vice versa for blur (that is, assuming I’m using document.hasFocus() right)
Not to mention that the order of the events is also wrong, since focusin and focusout should be before focus and blur, respectively.
If everything were working right, it should look like this:

focusin: NOT focused
focus: focused
focusout: focused
blur: NOT focused

This appears to work the same on Firefox and Chrome. Is something wrong with my browsers, or did I code something wrong?

Sources

• https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event
• https://caniuse.com/focusin-focusout-events
• https://w3c.github.io/uievents/#event-type-focus

From caniuse.com:

The focusin and focusout events fire just before the element gains or loses focus, and they bubble. By contrast, the focus and blur events fire after the focus has shifted, and don’t bubble.

From mozilla.org/…/focusin_event and …/focus_event:

The focusin event fires when an element is about to receive focus.
The focus event fires when an element has received focus.

From w3c.github.io:

(Regarding focusin) This event type is similar to focus, but is dispatched before focus is shifted
(Regarding focus) This event type is similar to focusin, but is dispatched after focus is shifted

I’m halfway to understanding how this.timerId doesn’t cause an error in the react docs.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {    this.setState({      date: new Date()    });  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

I get that timerId along with setInterval come from Node. I thought node was just the runtime, does it come with other modules aside from Node Timers? Where is timerID initialized and or inherited from? Do all objects get a timerID when running on Node?

I have the code below that search fine so far. I know need to filter/ignore search results in the array that are based on the first indeces of each sub-array (basically keys in an object).

  search(rows) {
    return rows.filter((row) => {
      // Get the searchable columns from the row.
      if (!this.searchTerm) {
        return true;
      }

      let objectKeys = Object.keys(row);
      let objectEntries = Object.entries(row);

      let compareSearchableColumns = this.searchableColumns
        ? this.searchableColumns.split(",").map((item) => item.trim())
        : objectKeys;

      for (const [key, value] of objectEntries) {
        if (
          new String(value)
            .toLowerCase()
            .match(new RegExp(this.searchTerm.toLowerCase()))
        ) {
          return true;
        }
      }

      return false;
    });
  }

First of all, I am developing a project where I use a crud operations with .net core. But how should I do the update? First code; Function that opens the modal of the retrieved data. Data is being pulled successfully.
Second code; The area where the button is located in ajax. Code in the third field; I will update the ajax function. I don’t know how to use this. The code in the fourth field; The routing found in the index. The code in the fifth field; update controller area, which I haven’t been able to do yet.
Honestly, I’m pretty new to ajax. How do I do this?

function upNews(pid) {
    var table = $('#kt_datatable').DataTable();
    secilenDeger = table.data().filter(x => x.Id == pid)[0];
    $('#idd').val(secilenDeger.Id);
    $('#nm').val(secilenDeger.Name);
    $('#dsc').val(secilenDeger.Description);
    $('#grs').val(secilenDeger.DetayImage);
    $('#dt').val(secilenDeger.Data);


    $('#GexampleModalSizeLg').modal('show');
}

    <a href="javascript:"  class="btn btn-sm btn-clean btn-icon" onclick="upNews('+ data +')" title="Edit details">
                                <i class="la la-edit"></i>

function updateNews() {
    $.ajax({
        type: "POST",
        url:hst3,
        dataType: "json",
        data: {
            "table": {
                "name": $('#Name').val(),
            }
        },
    })
}

var hst3 = "@Url.Action("EditNews", "Haberler")";

        [HttpPost]
        public Task<JsonResult EditNews(News n)
        {
            var sonuc = _adminService.addnws(newss);
            return Task.FromResult(Json(sonuc));         
        }

The answers in this thread and in other places I’ve searched only work if “parent_id” is known for each object in the array.

What if the only property for the objects is depth?

The depth essentially tells me if the item is a “root node” (depth of 1) or a “child node” (depth of 2 or more).

A child’s parent is the object directly before it if the preceding object has a smaller depth. (The parent’s depth should always be 1 more than its child.)

If an object and the preceding object has the same depth, then they are actually siblings on the same level

If the preceding object has a higher depth, then the current item is actually the sibling of the earliest preceding item that has the same depth (or you could also look at it as the child of the earliest preceding item that has a lower depth)

E.g.

// Please note "name" in the example below 
// is just for illustrative purposes.
// My actual array will have random names

const items = [
    {
        name: "1",
        depth: 1,
    },
    {
        name: "2",
        depth: 1,
    },
    {
        name: "2_1",
        depth: 2,
    },
    {
        name: "2_1_1",
        depth: 3,
    },
    {
        name: "2_1_2",
        depth: 3,
    },
    {
        name: "2_2",
        depth: 2,
    },
]

So I would want to convert that flat array into a tree like:

const newItems = [
    {
        name: "1",
        depth: 1,
        children: [],
    },
    {
        name: "2",
        depth: 1,
        children: [
            {
                name: "2_1",
                depth: 2,
                children: [
                    {
                        name: "2_1_1",
                        depth: 3,
                        children: [],
                    },
                    {
                        name: "2_1_2",
                        depth: 3,
                        children: [],
                    },
                ],
            },
            {
                name: "2_2",
                depth: 2,
                children: [],
            },
        ],
    },
]

I’m trying to build a function that removes an item from an array. Both the array and item are configured using parameters pushing in when I call the function.

However it’s not returning the expected [1,2,4] rather it’s returning “not yet” a string I built into an if statment to return if it fails.

I can see in a console log the popped variable = 3 and the current for loop is correctly looping through all the options. So why isn’t it working?

const removeFromArray = function() {
   let args = Array.from(arguments);
   let popped = args.pop();
   for (i = 0; i < args.length; i++) {
      let current = args[i];
      if (current === popped) {
         console.log(args);
         return args;
      } else {
         console.log("not yet");
      }
   }
};


removeFromArray([1, 2, 3, 4], 3);

The goal is to get 3 unordered lists with name, age and email in each of them. I managed to make a structure of list, but I can’t figure out how to get access to values of elements.

Any help would be really appreciated.Thanks

JS

 const users = [
{
  name: "Helene",
  age: 49,
  email: "[email protected]",
}, {
  name: "Janet",
  age: 32,
  email: "[email protected]",
}, {
  name: "Michel",
  age: 21,
  email: "[email protected]",
}];

HTML

<div class="app"></div>

all.

I am trying to get my data using this function:

function getDataUri() {
  ApexCharts.exec('chartID', 'dataURI').then(({ imgURI }) => {
    console.log(imgURI);
  });
}

However, when I put that into my export default function ie

export default function Page() {
  console.log(getDataUri());

  return (
      <div>
        <Chart />
      <div>
    );
  }

The chart renders on the page when I do not input console.log(getDataUri());. When I do, I get the following error: Uncaught TypeError: apexcharts__WEBPACK_IMPORTED_MODULE_4__.ApexCharts is undefined

I have run npm install apexcharts, and I import it as import ApexCharts from ‘apexcharts’.

Please advise how to fix this so I can access the uri and then input it as an img to my pdf!

Hello I’m making a simple counter that is counting to 3 every time i click the button. The counter works just fine, because I can see how he changes in the console. The problem is, my JS isn’t affecting the CSS. When I delete the else statements and leave only one, this is the one that is working.

CSS. note: The strongAttackBtn and strongAttackBtnLoading are in the same div.

.strongAttackBtn {
    height: 50px;
    width: 150px;

    color: black;
    font-weight: 800;
}
.strongAttackBtnLoading {
    position: absolute;
    height: 50px;
    width: 150px;
    background-color: rgba(0,0,0,0.5);
}

JS

const strongAttackBtnLoading = document.querySelector('.strongAttackBtnLoading');    
const strongAttackBtn = document.querySelector('.strongAttackBtn');
let strongAttackCounter = 0;

if (strongAttackCounter === 3) {
    strongAttackBtnLoading.style.width = '150px';
} else if (strongAttackCounter === 2) {
    strongAttackBtnLoading.style.width = '100px';
} else if (strongAttackCounter === 1) {
    strongAttackBtnLoading.style.width = '50px';
} else if (strongAttackCounter === 0) {
    strongAttackBtnLoading.style.width = '0px';
}

strongAttackBtn.addEventListener('click', function(){
  strongAttackCounter++;
})

So I am using a navigation bar built in Bootstrap 5, where on-hover the submenu items open, this works great on main nav items, on sub-navigation it overlaps and breaks, meaning that under the “services” panel, everything cannot be accessed.

I have used Dropend on the sub-navigation so the dropdown should in theory drop onto the right and not down like it does currently, any ideas?

Navigation bar HTML with main menu and nested “services” menu/dropdown:

<ul id="menu-primary" class="navbar-nav me-auto mb-2 mb-md-0 navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown nav-item nav-item-235369"><a href="https://yorkshireaccountancy.streamer.click/about-us/" class="nav-link dropdown-toggle show" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">About Us</a>
<ul class="dropdown-menu depth_0 show">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235370"><a href="https://yorkshireaccountancy.streamer.click/careers/" class="dropdown-item ">Careers</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235371"><a href="https://yorkshireaccountancy.streamer.click/referral-scheme/" class="dropdown-item ">Referral Scheme</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235372"><a href="https://yorkshireaccountancy.streamer.click/meet-the-team/" class="dropdown-item ">Meet The Team</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235373"><a href="https://yorkshireaccountancy.streamer.click/switch-accountants/" class="dropdown-item ">Switch Accountants</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235374"><a href="https://yorkshireaccountancy.streamer.click/testimonials/" class="dropdown-item ">Testimonials</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235375"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Services</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235376 dropend dropdown-menu-end"><a href="#" class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Services</a>
    <ul class="dropdown-menu sub-menu  depth_1">
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235377"><a href="https://yorkshireaccountancy.streamer.click/annual-accounts/" class="dropdown-item ">Annual Accounts</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235378"><a href="https://yorkshireaccountancy.streamer.click/auto-enrolment/" class="dropdown-item ">Auto Enrolment</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235379"><a href="https://yorkshireaccountancy.streamer.click/bookkeeping/" class="dropdown-item ">Bookkeeping</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235380"><a href="https://yorkshireaccountancy.streamer.click/company-formation/" class="dropdown-item ">Company Formation</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235381"><a href="https://yorkshireaccountancy.streamer.click/corporation-tax/" class="dropdown-item ">Corporation tax</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235382"><a href="https://yorkshireaccountancy.streamer.click/management-accounts/" class="dropdown-item ">Management Accounts</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235383"><a href="https://yorkshireaccountancy.streamer.click/payroll/" class="dropdown-item ">Payroll</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235384"><a href="https://yorkshireaccountancy.streamer.click/self-assessment/" class="dropdown-item ">Self-Assessment</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235385"><a href="https://yorkshireaccountancy.streamer.click/fee-protection-insurance/" class="dropdown-item ">Fee Protection Insurance</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235386"><a href="https://yorkshireaccountancy.streamer.click/vat/" class="dropdown-item ">VAT</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235387 dropend dropdown-menu-end"><a href="#" class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Specialisms</a>
    <ul class="dropdown-menu sub-menu  depth_1">
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235388"><a href="https://yorkshireaccountancy.streamer.click/ebay-accountants/" class="dropdown-item ">eBay Accounting</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235389"><a href="https://yorkshireaccountancy.streamer.click/pub-accountants/" class="dropdown-item ">Pub Accountants</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235390"><a href="https://yorkshireaccountancy.streamer.click/capital-allowances-tax-relief/" class="dropdown-item ">Capital Allowances Tax Relief</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235391"><a href="https://yorkshireaccountancy.streamer.click/research-and-development-tax-relief/" class="dropdown-item ">Research and Development Tax Relief</a></li>
    </ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235392"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Partnerships</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235393"><a href="https://yorkshireaccountancy.streamer.click/pandle-accountant/" class="dropdown-item ">Pandle Accountant</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235394"><a href="https://yorkshireaccountancy.streamer.click/quickbooks-accountant/" class="dropdown-item ">QuickBooks Accountant</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235395"><a href="https://yorkshireaccountancy.streamer.click/receipt-bank/" class="dropdown-item ">Receipt Bank</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235396"><a href="https://yorkshireaccountancy.streamer.click/sage-accountant/" class="dropdown-item ">Sage Accountants</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235397"><a href="https://yorkshireaccountancy.streamer.click/satago/" class="dropdown-item ">Satago</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235398"><a href="https://yorkshireaccountancy.streamer.click/xero-accountant/" class="dropdown-item ">Xero Accountant</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235399"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Who We Help</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235400"><a href="https://yorkshireaccountancy.streamer.click/individuals-accountant/" class="dropdown-item ">Individuals</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235401"><a href="https://yorkshireaccountancy.streamer.click/landlords-accountant/" class="dropdown-item ">Landlords</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235402"><a href="https://yorkshireaccountancy.streamer.click/limited-company-accountants/" class="dropdown-item ">Limited Companies</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235403"><a href="https://yorkshireaccountancy.streamer.click/limited-liability-partnership-accountant/" class="dropdown-item ">Limited Liability Partnership</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235404"><a href="https://yorkshireaccountancy.streamer.click/sole-traders-accountants/" class="dropdown-item ">Sole Traders</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235405"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Support</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235407"><a href="https://yorkshireaccountancy.streamer.click/blog/" class="dropdown-item ">Blog</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235408"><a href="https://yorkshireaccountancy.streamer.click/free-downloads/" class="dropdown-item ">Free Downloads</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235409"><a href="https://yorkshireaccountancy.streamer.click/news/" class="dropdown-item ">News</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235410"><a href="https://yorkshireaccountancy.streamer.click/factsheets/" class="dropdown-item ">Factsheets</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235411"><a href="https://yorkshireaccountancy.streamer.click/resources/" class="dropdown-item ">Resources</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235917"><a href="https://yorkshireaccountancy.streamer.click/contact-us/" class="nav-link ">Contact Us</a></li>
</ul>

JavaScript code used to turn the bootstrap click to open subnavigation into on hover:

<script>
    document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

    document.querySelectorAll(".navbar .nav-item").forEach(function(everyitem){

        everyitem.addEventListener('mouseover', function(e){

            let el_link = this.querySelector('a[data-bs-toggle]');

            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.add('show');
                nextEl.classList.add('show');
            }

        });
        everyitem.addEventListener('mouseleave', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');

            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.remove('show');
                nextEl.classList.remove('show');
            }


        })
    });

}
// end if innerWidth
}); 
// DOMContentLoaded  end
    
</script>

Any ideas would be much appreciated!`