Can I have 2 JavaScript onClick events in a single element?

Question

Can you put 2 JavaScript onClick events in a single element, this is what I have tried so far, I've tried calling functions but that wouldnt work either.

<div class="contactme"><a href="#contactnav" onclick="document.getElementById('download').style.display='none'; document.getElementByID('skype').style.display='none';">Message me!</a></div>

Calling functions:

function hide(){
document.getElementById('download').style.display='none';
document.getElementById('skype').style.display='none';
}

HTML:

<div class="contactme"><a href="#contactnav" onclick="hide();">Message me!</a></div>

However none of them seem to work.

Show the HTML for "download" and "skype" elements. Are there errors in the browser's error console? — JJJ, Nov 09 '14 at 16:11
@Ajey Upon clicking the "Message Me" text it would hide the div 'skype' and also the div 'download' — , Nov 09 '14 at 16:16

score 0 · Accepted Answer · answered Nov 09 '14 at 16:14

0

Of course, you can do it in pure Javascript. Your HTML doesn't need the onclick property at all.

HTML:

<div class="contactme"><a href="#contactnav">Message me!</a></div>

JavaScript:

var contact = document.getElementsByClassName("contactme")[0];

contact.addEventListener("click", function() {
    document.getElementById('download').style.display='none';
    document.getElementByID('skype').style.display='none';
}

Now you can use contact.addEventListener to add any function you want, like this:

contact.addEventListener("click", hide);

answered Nov 09 '14 at 16:14

Marco Bonelli

63,369
21
118
128

I am putting the script in – Nov 09 '14 at 16:21
@KarimVally not required, but recommended – Marco Bonelli Nov 09 '14 at 16:22
@KarimVally I provided you a working example, if your code doesn't work tnhen it means the problem is somewhere else... – Marco Bonelli Nov 09 '14 at 16:26

score 0 · Answer 2 · answered Nov 09 '14 at 16:15

0

try this

http://jsfiddle.net/ErnestoOsuna/2pjfL5oq/ Message me!

element=document.getElementById('some_id');
element.addEventListener('click',some_func);
element.addEventListener('click',some_func2);

answered Nov 09 '14 at 16:15

Ernesto

301
1
6

score 0 · Answer 3 · answered Nov 09 '14 at 16:19

0

Your both code is correct but, in first code you typed 'document.getElementByID'. just fixed it.

answered Nov 09 '14 at 16:19

VMT

191
10

score 0 · Answer 4 · answered Nov 09 '14 at 16:35

Use element.addEventListener(Event, Function, false);

document.getElementById('ELEMENTID').addEventListener('click', function(e) {
    // onclick code here
}, false);

document.getElementById('ELEMENTID').addEventListener('click', function(e) {
    // more code here
}, false);

score -1 · Answer 5 · edited May 23 '17 at 12:12

-1

How to call multiple JavaScript functions in onclick event?

And about your snippet,

onclick="hide()"

edited May 23 '17 at 12:12

Community

1
1

answered Nov 09 '14 at 16:14

Cacay Perez

31
1

score -1 · Answer 6 · answered Nov 09 '14 at 16:17

You can do it logically i.e:

<div class="contactme">
<a href="#contactnav" onclick="myfun('one')">Message me!</a>'
</div>

Now in javascript do this programatically:

function myfun(var execute){

    if(execute=="one"){
    // execute this if it is one
    }
    else(execute=="two"){
    // execute this if it is two
    }

}

Now here whenever you call myfun('one') it execute your first condition and myfun('two') it execute second.

Can I have 2 JavaScript onClick events in a single element?

6 Answers6