JS convert onclick() to mouseover

Question

I'm having an issue with a piece of JS that doesn't seem to want to work.

I created a tab widget, following this guide: https://www.w3schools.com/howto/howto_js_tabs.asp

I replaced onclick with onmouseover in the html part and changed the buttons to a-type elements:

Original:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>

My version:

<a class="tablinks" onmouseover="openCompany(event, 'xName') "id="defaultOpen">Link</a>

Now that's all working fine. But further down the page it explains how to keep a certain tab open by default but it doesn't seem to be working alright. Neither in the original nor in my version.

Original:

document.getElementById("defaultOpen").click();

My version:

document.getElementById("defaultOpen").mouseover();

Has anyone got an idea why this wouldn't work? It's driving me nuts!

score 1 · Accepted Answer · answered Aug 10 '17 at 17:38

1

try this solution

Just use

document.getElementById("defaultOpen").onmouseover();

instead of

document.getElementById("defaultOpen").mouseover();

function click_btn()
{
  document.getElementById("defaultOpen").onmouseover();
}

function openCompany(a, b)
{
  alert('link');
}

<button class="tablinks" onclick="click_btn()" id="defaultOpenButton">London</button>
<a class="tablinks" onmouseover="openCompany(event, 'xName')" id="defaultOpen">Link</a>

answered Aug 10 '17 at 17:38

Viktor Oleksyshyn

411
3
6

Ooh, yeah. It looks like `.mouseover()` is only defined for [jQuery.](https://api.jquery.com/mouseover/) – jpaugh Aug 10 '17 at 17:40
Yes. And If you are going to use JQuery, you can also use something like `$("#defaultOpen").trigger("mouseover");` – Viktor Oleksyshyn Aug 10 '17 at 17:43

score -1 · Answer 2 · edited Aug 10 '17 at 17:40

-1

Can you use just this line to keep the first one open :

document.getElementById("defaultOpen").style.display = "inline";

Demo

I think this can help you

edited Aug 10 '17 at 17:40

jpaugh

6,634
4
38
90

answered Aug 10 '17 at 17:03

El Mahdi Faress

1

While that may work, being able to trigger the mouseover event is a fundamental thing that we should learn how to do, rather than try to work-around. – jpaugh Aug 10 '17 at 17:41

JS convert onclick() to mouseover

2 Answers2