Pass mouse event to function by using js click()

Question

I have one onclick as below

<div class="tablinks active" onclick="openmarket(event,this)" data-uid="1">

openmarket function like below

function openmarket(evt, obj) {
    var i, tabcontent2, tablinks2;
    tabcontent2 = document.getElementsByClassName("tabcontent2");
    for (i = 0; i < tabcontent2.length; i++) {
        tabcontent2[i].style.display = "none";
    }
    tablinks2 = document.getElementsByClassName("tablinks2");
    for (i = 0; i < tablinks2.length; i++) {
        tablinks2[i].className = tablinks2[i].className.replace(" active", "");
    }
    document.getElementById(obj.getAttribute('data-uid')).style.display = "block";
    evt.currentTarget.className += " active";
}

Here in this function I have passed 2 parameters,
1) event
2) object

now I try to click this div by JS like below.

$("div [data-uid='1']").click();

but it won't work because I guess parameter evt is not valid or mismatch from what it should be.

Can anyone help me ?

Thank you.

Edit I'm getting following error.

Cannot read property 'className' of undefined

and error line is evt.currentTarget.className += " active";

why don't you add a callback to the click and pass event and this to the openmarket function — SabirAmeen
– SabirAmeen, Commented Jun 19, 2017 at 8:22
This is expected behaviour as your not actually clicking the div but instead using jQuery click function to simulate the click. Both are different. This might help you stackoverflow.com/questions/11127908/… and yes evt.target.className will work in both cases — Manish
– Manish, Commented Jun 19, 2017 at 8:32

npo · Accepted Answer · 2017-06-19 08:42:00Z

-1

Your selector query is wrong

change $("div [data-uid='1']").click();

to $("div[data-uid='1']").click();

this will return a jqueryclick click event not a mouse click event

answered Jun 19, 2017 at 8:42

npo

1,0508 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jacques Bollosse · Accepted Answer · 2017-06-19 08:48:34Z

You can use simple javascript :

It works well. I fthere is only one div, use and id instead of a class.

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<!--I wish to append it here-->
<body>

    <div  class="tablinks active uid1" onclick="openmarket(event,this)" 
   data-uid="1" style="height:30px;width:50px;background-color:red;">
    </body>
</html>

<script type="text/javascript">
function openmarket(evt, obj) {
    var i, tabcontent2, tablinks2;
    tabcontent2 = document.getElementsByClassName("tabcontent2");
    for (i = 0; i < tabcontent2.length; i++) {
        tabcontent2[i].style.display = "none";
    }
    tablinks2 = document.getElementsByClassName("tablinks2");
    for (i = 0; i < tablinks2.length; i++) {
        tablinks2[i].className = tablinks2[i].className.replace(" active", "");
    }
    document.getElementById(obj.getAttribute('data-uid')).style.display = "block";
    evt.currentTarget.className += " active";
}
var list=document.getElementsByClassName("uid1");
for(var i=0;i<list.length;i++){
    list[i].click();
}
</script>

Collectives™ on Stack Overflow

Pass mouse event to function by using js click()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related