Develop Reference

How do I add another onclick function after the vote function? [duplicate]

Can we put two JavaScript onclick events in one input type button tag? To call two different functions?

This one works:
<input type="button" value="test" onclick="alert('hey'); alert('ho');" />
And this one too:
function Hey()
{
alert('hey');
}
function Ho()
{
alert('ho');
}
.
<input type="button" value="test" onclick="Hey(); Ho();" />
So the answer is - yes you can :)
However, I'd recommend to use unobtrusive JavaScript.. mixing js with HTML is just nasty.

The HTML
click
And the javascript
// get a cross-browser function for adding events, place this in [global] or somewhere you can access it
var on = (function(){
if (window.addEventListener) {
return function(target, type, listener){
target.addEventListener(type, listener, false);
};
}
else {
return function(object, sEvent, fpNotify){
object.attachEvent("on" + sEvent, fpNotify);
};
}
}());
// find the element
var el = document.getElementById("btn");
// add the first listener
on(el, "click", function(){
alert("foo");
});
// add the second listener
on(el, "click", function(){
alert("bar");
});
This will alert both 'foo' and 'bar' when clicked.

There is no need to have two functions within one element, you need just one that calls the other two!
HTML
<a href="#" onclick="my_func()" >click</a>
JavaScript
function my_func() {
my_func_1();
my_func_2();
}

You can attach a handler which would call as many others as you like:
<a href="#blah" id="myLink"/>
<script type="text/javascript">
function myOtherFunction() {
//do stuff...
}
document.getElementById( 'myLink' ).onclick = function() {
//do stuff...
myOtherFunction();
};
</script>

You could try something like this as well
<a href="#" onclick="one(); two();" >click</a>
<script type="text/javascript">
function one(){
alert('test');
}
function two(){
alert('test2');
}
</script>

Preventing href in <a></a> from executing via Javascript

So I have this following code in my HTML:
<li class="" id="toolbar_section"><a id="toolbar_section_child" href="#foobar" onclick="return toolbarSetSection(this);" data-toggle="checkpoint">foobar</a></li>
And written in my Javascript is:
<script type="text/javascript">
function toolbarSetSection(event){
//some logic which leads to
return false;
};
</script>
However, the href still executes... I have checked many similar topics with answers like event.preventDefault(); but they don't help me either.

In your HTML you should change onclick="return toolbarSetSection(this);" to onclick="toolbarSetSection(event);", and then have event.preventDefault(); in your javascript function.
Your full code would be:
<li class="" id="toolbar_section"><a id="toolbar_section_child" href="#foobar" onclick="toolbarSetSection(event);" data-toggle="checkpoint">foobar</a></li>
and
function toolbarSetSection(event) {
event.preventDefault();
return false;
};

return false should usually work, but maybe there is an error in your toolbarSetSection function.
Calling event.preventDefault() should usually work, too. However in your case you expect the function to be called with event as first parameter, while your HTML code calls onclick="return toolbarSetSection(this);" with the link object as first parameter. Maybe you wanted to call toolbarSetSection(event); instead.

HTML
<ul>
<li class="" id="toolbar_section2"><a id="toolbar_section_child" href="#" onclick="toolbarSetSection()" data-toggle="checkpoint">foobar</a></li>
</ul>
js
function toolbarSetSection()
{
alert('started');
event.preventDefault();
alert('weee');
}
jsfiddle so you cannot say it is not working :) : https://jsfiddle.net/rgoopw18/1/

a better way to get the expected behavior without adding onclick on the tag
<script>
document.getElementById('toolbar_section_child').on('click', function(e){
e.preventDefault();
})
</script>
Assuming you have a unique id for the a tag.
EDIT
for dynamically created elements use event delegation
document.addEventListener('click',function(e){
/*
if(e.target && e.target.id == 'toolbar_section_child'){
e.preventDefault();
}
*/
// using a common class name
if(e.target && e.target.className.split(" ").indexOf("toolbar_section_child") != -1){
e.preventDefault();
}
})

Add in onclick the script type

I need to call the method _trackingEvent if the button was clicked, So I added in the onlick in the button the following code :
<button class="btnInscription"
onclick="<script type="text/javascript">
$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});
</script>;">
when I look in the source of page all code that I put it up is whith red color. I think the problem is with parenthesis.

I see 2 problems :
you have unescaped " inside your attribute
you don't need the tag inside onclick ( onclick code is always javascript code)
the following code should work :
onclick="$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});"

don't do thinks like this!
Better this way:
<button class="btnInscription">blub</button>
<script>
$('.btnInscription').on('click', function() {
GA._trackEvent('Account','Subscribe','Not Facebook');
});
</script>
make sure to launch JS at the Bottom of your page

You are miss placing it.
The script tag should be in the head of the page and the onclick attribute should call the function :
//this should be in the <head> of the page, inside a <script> tag
function track() {
//$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});
console.log('executed when clicked');
}
<button class="btnInscription"
onclick="track()">test</button>

Also Try Once In Javascript
function testfun() {
//$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});
console.log('If Click == true then it will execute');
}
<button class="btnInscription"
onclick="testfun()">click</button>

try it Once In your File
<button class="btnInscription" id="my-btn">click</button>
<script>
$(dicument).ready(function(){
$('#my-btn').click(function(){
alert('clicked for testing');
{GA._trackEvent('Account','Subscribe','Not Facebook');}
});
});
</script>

javascript toggle visibility and add function preventDefault

i´m trying to display popup-divs within a site and it works quite well, except for one thing –
i want to prevent the Default behavior of refreshing the site. I´m new to javascript and i honestly don´t know how to add the function (i already found the right one, i think...).
<script type="text/javascript">
function toggleVisibility(selectedPopup) {
var popvar = document.getElementsByClassName('popup');
for(var i=0; i<popvar.length; i++) {
if(popvar[i].id == selectedPopup) {
popvar[i].style.visibility = 'visible';
} else {
popvar[i].style.visibility = 'hidden';
}
}
}
It works like i wanted it to work – it displays the selected DIV, hides the other and vice versa.
Still, i want to prevent the site from jumping to the top. So i added this snippet:
$(function() {
$("#").click(function(event){
event.preventDefault()
});
});
The responding html is this:
<a href="#" onclick="toggleVisibility('pop01');">
and this
<div id="pop01" class="popup">
<img src="assets/img/01/01_02_pop_01.png"></img>
</div>
How can i include the second javascript snippet into the first one?
Many thanks in advance...

You should just be able to pass event into your function.
The HTML
<a href="#" onclick="toggleVisibility(event, 'pop01');">
The Javascript (partial)
function toggleVisibility(event, selectedPopup) {
event.preventDefault();
var popvar = document.getElementsByClassName('popup');
// etc...
}
I believe that should do it!
JSFiddle Example: http://jsfiddle.net/c4LXf/

As an alternative you can just remove the # and replace with javascript:;
<a href="javascript:;" onclick="toggleVisibility('pop01');">
Or remove the onclick and just use the href:
<a href="javascript:toggleVisibility('pop01');">

Instead of
$(function() {
$("#").click(function(event){
event.preventDefault()
});
try
$(function() {
$("#").click(function(event){
return false;
});

You can just use following:
<a href="#" onclick="return toggleVisibility('pop01');">
If you add a return false in your function:
function toggleVisibility(selectedPopup) {
// your code ...
return false;
}
Or, Change your link like:
<a href="javascript:toggleVisibility('pop01');">

How to capture clicked button in js functions?

I have to buttons like this:
<input type='submit' id='submit' class='processAnimation'>
<input type='reset' id='reset' class='processAnimation'>
Now I have two js function. First function is called when ajax request is started and seconf function is called when ajax request is completed.
this.showLoading = function () {
backupsource = $('.processAnimation').attr('class');
$('.processAnimation').removeAttr('class').addClass('disabled-btn processAnimation');
$('.processAnimation').attr( 'backupsource', backupsource );
}
this.hideLoading = function () {
backupsource = $('.processAnimation').attr('backupsource');
if( backupsource != undefined ) {
$('.processAnimation').removeAttr('class').addClass( backupsource );
$('.processAnimation').removeAttr('backupsource');
}
}
EDIT: Above two functions are working and moving flower replaced clicked button. When request is complete then button is back. Problem is that when I click one button it replace all buttons(class=procesAnimation) with moving flower.
Thanks

Since you haven't posted your click event binding I am going to take a quick guess and say that your selector is not set right or conflicts with another element. try something like this:
$('input').click(function(){
switch( $(this).attr('id') ){
case 'submit' :
ShowLoading();
break;
case 'reset' :
HideLoading();
break;
}
});
and change the syntax of how you initialize the two functions to the following:
function ShowLoading(){
//do your show loading procedure here
};
function HideLoading(){
//do your hide loading procedure here
};

This is using the code u have currently
$('.processAnimation').click(function (){
if($(this).attr('type')=='submit'){
//submit has been clicked
}else{
//reset has been clicked
}
});
but it looks like you should really be using ID's rather than class's

if you have jQuery it is simple
$('#submit').click(showLoading)
$('#reset').click(hideLoading)
Just two different binding of events.
or did I miss something? :)