Multiple function onClick javascript - javascript

Multiple functions on js not executing the first one does but the second one doesnt
onClick="javascript:${ formId }(${ peopleId }, 'userSettingsAddAccountNotificationsModify') contactMethodPopUp() "

You're going about it the wrong way what you could do is have one function onClick and then execute the other inside the that first function.
<button onclick="firstFunc()"><button/>
<script>
function firstfunc(){
//do something
secondFunc()
}
function secondFunc(){
//do something
}
<script/>

Use addEventListener instead of setting the onclick attribute.

You can put multiple functions in onclick like this:
onclick="alert('hey'); console.log('hey');"

Related

onclick needs to be double clicked

When using onclick in JavaScript to call the function nowClicked(), I need to click the object twice in order for the alert to show. Below is the code for my function.
function nowClicked() {
$('.object').click(function() {
$('.object').removeClass("clicked");
var myClass = $(this).attr("id");
alert(myClass);
$(this).addClass("clicked");
e.stopImmediatePropagation();
});
};
What is the problem?
Here's what happens the first time you click your button:
nowClicked is called because you've set it up on the button's onclick
nowClicked sets up a jQuery click handler for .object
The code inside the jQuery click handler only runs the next time you click on the button.
It looks like you are mixing up two ways of handling clicks -- one is using the onclick event, and the second is using jQuery. You need to pick one and stick to it instead of using both.
There is no need to put it inside another function,because click is itself handling a callback function.Remove the outer function nowClicked else remove the $('.object').click(function() {.In the second case you may to pass the context as a function argument.
$('.object').click(function() {
$('.object').removeClass("clicked");
var myClass = $(this).attr("id");
alert(myClass);
$(this).addClass("clicked");
e.stopImmediatePropagation();
});

How do I call this script?

I have a script for deleting a record without refreshing. I'm still new to javascript and trying to learn how to call out this script. Here's what I have.
My button:
<button id="<?php echo $rrr['id']; ?>" class="delbutton" onclick="">Delete</button>
My Javascript:
<script type="text/javascript" >
$(function() {
$(".delbutton").click(function() {
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
if (confirm("Sure you want to delete this note? This cannot be undone later.")) {
$.ajax({
type : "POST",
url : "delete-note.php", //URL to the delete php script
data : info,
success : function() {
}
});
$(this).parents(".record").animate("fast").animate({
opacity : "hide"
}, "slow");
}
return false;
});
});
I borrowed this code from someone else while doing research for deleting without reloading. Normally I'd see a function look something like this:
function myFunction()
Then I can call it using onclick like this:
onclick="myFunction()"
With the way this script is written, I'm not sure what "function" I'm supposed to be calling or if I need to add the name somewhere.
Any guidance or reading material would be helpful.
Thanks
You don't need to use an onclick here:
$(".delbutton") finds all the buttons with the CSS class delbutton.
.click(function() { ... }) says execute the given function when the button is clicked.
$(function() {
This means everything in there is being called when the document is ready.
As UncleDave already said, because of the .click your script should already be called onclick. It would be the same if you replace this line:
$(".delbutton").click(function() {
with this line:
function myOnClickFunction() {
and then call it onClick via onClick="myOnClickFunction()"
The click function binds the function as an event handler to the click event on all the elements matched by the selector passed to the jQuery function which is aliased to $.
(This replaces the onclick attribute)
To call the function, just click the matching element (any element that is a member of the delbutton class).
You could also trigger the event programatically with the trigger method:
$(".delbutton").trigger("click");
$(".delbutton").click(function() is listening to any click to trigger the action which is the code in your function.
You don't need onclick="" for the button tag.
How do I call this script?
You already do, it is self executing.
You do not need to register a sepperate click event to the button. The script is doing this already itself.
$(".delbutton").click(function() {
// code being executed when button is pressed
}
If you want to do it the way you are used to, just create your function in the tag like this:
<script>
function myFunction() {
// do something
}
</script>
then, your HTML element should look like this:
<button onclick="myFunction()" >

How do I pass parameters into a jQuery.click() function on a <span> tag?

I have used the jQuery.click() function in the past with buttons and have had nothing but success, but I tried to use it to click on a <span> and it doesn't work.
Also I noticed that it automatically executed my function without listening to the click.
Judging how I used it on buttons, this would be the syntax:
<p><span id="example">Click Here</span></p>
$("#example").click(exampleFunction(p1, p2));
But it does not seem to work. Again it just executes it without the click even taking place. I even tried:
$(document).on("click", "#example", exampleFunction(p1, p2));
Still no luck, same results.
I am making a weather app and my goal with this is to toggle the temperature between Fahrenheit and Celsius by clicking on the unit. I made a copy of the code for the app on codepen.io here:
Codepen Weather App
I appreciate the help!
Looks like you should try something like this:
$(document).on("click", "#example", function() {
console.log('Hello World');
});
Using the function() definition alone give me Uncaught SyntaxError: Unexpected token (.
What you're doing is binding an anonymous function to the click. If you were doing this somewhat differently, like MyFunction(), then it would only execute the function.
If you had MyFunction you could still trigger it using click like so:
function MyFunction() {
console.log('Hurra!')
}
$('#example').click(MyFunction)
Notice that I didn't use the parentheses otherwise it will actually run the function instead of binding it.
Try it like this:
$('#example').click(bleepme);
function bleepme(){
alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span id="example">Click Here</span></p>
Note that the on-click call to the bleepme function does not have parens -- if you put parens there, it will run the function at document.ready, but not upon click.
Example - no parens on click
Example 2 - parens on click
Well you should supply a body to the function :)
$("#example").click(function() {
alert('clicked');
});
I don't think that you really want to pass parameters into into the function. By the time someone is clicking on the temperature to toggle the units, the document.ready function has finished executing. You actually want to read the values for temp and units from the DOM or from local storage. So, you don't need to pass parameters into your function, which should make things a bit easier.
I think you code need to work like this way
$(document).ready(function(){
$('#example').on('click',function(){
// Some of your logic here
});
});

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

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">Message me!</div>
Calling functions:
function hide(){
document.getElementById('download').style.display='none';
document.getElementById('skype').style.display='none';
}
HTML:
<div class="contactme">Message me!</div>
However none of them seem to work.
Of course, you can do it in pure Javascript. Your HTML doesn't need the onclick property at all.
HTML:
<div class="contactme">Message me!</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);
try this
http://jsfiddle.net/ErnestoOsuna/2pjfL5oq/
Message me!
element=document.getElementById('some_id');
element.addEventListener('click',some_func);
element.addEventListener('click',some_func2);
Your both code is correct but, in first code you typed 'document.getElementByID'.
just fixed it.
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);
How to call multiple JavaScript functions in onclick event?
And about your snippet,
onclick="hide()"
You can do it logically i.e:
<div class="contactme">
Message me!'
</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 determine what was clicked using JavaScript?

Once again I've inherited someone else's system which is a bit of a mess. I'm currently working with an old ASP.NET (VB) webforms app that spits JavaScript onto the client via the server - not nice! I'm also limited on what I can edit in regards to the application.
I have a scenario where I have a function that does a simple exercise but would also need to know what item was clicked to executed the function, as the function can be executed from a number of places within the system...
Say I had a function like so...
function updateMyDiv() {
$('#div1').hide();
$('#div2').hide();
$('#div13').show();
}
how could I get the ID (for example) of the HTML element that was clicked to execute this?
Something like:
function updateMyDiv() {
alert(htmlelement.id) // need to raise the ID of what was clicked,
$('#div1').hide();
$('#div2').hide();
$('#div13').show();
}
I can expand on this if neccessary, do I need to pass this as an arguement?
The this keyword references the element that fired the event. Either:
<element onClick="doSomething(this);">
or
element.onclick = function() {
alert(this.id);
}
Bind your click events with jQuery and then reference $(this)
$('.myDivClass').live('click', function () {
updateMyDiv(this);
});
var updateMyDiv = function (that) {
alert(that.id);
// save the world
};
You don't need to pass "this", it is assigned automatically. You can do something like this:
$('div').click(function(){
alert($(this).attr('id'));
})
Attach the function as the elements event handler is one way,
$(htmlelement).click(updateMyDiv);
If you are working with an already generated event, you can call getElementByPoint and pass in the events x,y coords to get the element the mouse was hovering over.
$('.something').click(function(){
alert($(this).attr('id'));
});
You would need to pass it the event.target variable.
$("element").click(function(event) {
updateMyDiv($(event.target));
});
function updateMyDiv(target) {
alert(target.prop("id"));
}
Where is your .click event handler? Wherever it is, the variable this inside of it will be the element clicked upon.
If you have an onclick attribute firing your function, change it to
<tag attribute="value" onclick="updateMyDiv(this)">
and change the JavaScript to
function updateMyDiv(obj) {
alert(obj.getAttribute('id')) // need to raise the ID of what was clicked,
$('#div1').hide();
$('#div2').hide();
$('#div13').show();
}
use the .attr('id') method and specify the id which will return what you need.

Categories