I have a function executed onclick:
function delete_image() {
//alert;
var result = confirm('Are you sure you want to delete this item?');
if(result) { ....delete the image.... }
}
function new_image() { ....Do SOmething.... }
Then I call that by
<a onclick="setNewUploadOnDelete()">Delete</a>
I need if the "alert" of delete_image function is "cancel" then just stop the second function. I try below code but not work.
function setNewUploadOnDelete() {
var retvalue;
retvalue = delete_image();
if(retvalue == false) { return retvalue; }
return = new_image();
}
Is there any advice please?
setNewUploadOnDelete can be refactored to:
function setNewUploadOnDelete() {
return delete_image ? new_image() : false;
}
Here we're using Conditional Statements. This is simple enough that you may not need a function to do it.
On another note, it's generally not a good idea to use onclick to trigger JavaScript for reasons of performance and separation of concerns. Have a read into adding event listeners.
Related
I am a beginner implementing a confirm method in my HTML code - when the user clicks on "x", they will be redirected to the home page. Otherwise, nothing happens.
My problem is that in confirm(), both "ok" and "cancel" options redirect to home page and I cannot figure out why.
I saw that many people have a similar problem, checked many forums and noticed that writing onclick="return confirmCancel() rather than onclick="confirmCancel()" helped in most of the cases but it did not solve the problem for me.
HTML:
<a onclick="return confirmCancel()"><img src="assets/cancel.svg"></a>
JS:
const confirmCancel = () => {
confirm("All your progress will be lost. Are you sure you want to leave?");
if (confirmCancel) {
window.location.assign("index.html");
} else {
return false;
}
}
You need to test the return value of confirm (rather than the truthiness of the confirmCancel function).
const confirmCancel = () => {
if (confirm("All your progress will be lost. Are you sure you want to leave?");) {
window.location.assign("index.html");
} else {
return false;
}
}
Try something like this.
<a onclick="pleaseConfirm"><img src="assets/cancel.svg"></a>
const pleaseConfirm = () => {
if (confirm("All your progress will be lost. Are you sure you want to leave?")) {
window.location.assign("index.html");
}
}
You're mostly there .. You need to check if confirm() is true .. Change:
confirm("All your progress will be lost. Are you sure you want to leave?");
if (confirmCancel)
To
var test_confirm = confirm("All your progress will be lost. Are you sure you want to leave?");
if (test_confirm === true)
Shorthand can be
if (confirm("All ... ... "){
You can do the functionality inside JavaScript instead of calling out JavaScript function in your HTML tag
<a id="btn-exit"><img src="assets/cancel.svg"></a>
var btnExit = document.querySelector('#btn-exit')
btnExit.addEventListener('click', () => {
if (confirm("are you sure?")) {
window.location.assign("index.html");
}
})
Just, before reading, I have read about this thread: Order of execution of functions bound to an event in Javascript but its not helping. Actually,
I have an anonymous function, define like that:
<input type="button" name="blablabla" value="Send" onclick="javascript:blablabla">
So, this function is on a button, use to validate forms. As you can see, It's an anonymous function, and I don't have any access on this code. This function start when I click on it. Okay, I have understood that
But, this function is not totally full, and I want to add my own, with her own logic of check. So I want my checks first, and then call the anonymous function. Here is my code:
function check() {
console.log("debut de check");
var participant = document.getElementById("new_participant_name");
var participant1 = document.getElementById("new_participant2_name");
var participant2 = document.getElementById("new_participant3_name");
participant = participant.value;
participant1 = participant1.value;
participant2 = participant2.value;
var trois_participants = (participant2) ? true : false;
if (!participant1 || !participant)
{
console.log("pas de participant1 ou participant, sert à rien de gérer la suite");
//if the script come here, I want to stop processing, and don't want to call the anonymous function.
return ;
}
}
window.onload = function()
{
document.getElementById("InsertButton").addEventListener('click', function () {
check();
})};
So, I want to call my function (check) before the anonymous function, but, with the same event. I don't know if I am totally understable... thanks per avance
EDIT: Sorry guys, My code have a bug before, yes the code is inlined, I will try all of your solutions tomorrow, thanks guys
If (and only if) the existing handler is attached using an inline onclick="..." handler, you can obtain its value, and then overwrite it:
window.onload = function() {
var el = document.getElementById('InsertButton');
var old_click = el.onclick;
el.onclick = undefined;
el.addEventListener('click', function() {
check();
old_click(this);
});
}
Why not create your own handler??
Element.prototype.myEventListener=function(name,func){
this.addEventListener(name,function(){
if(!check()){return;}
func();
});
};
Now you can do:
document.body.myEventListener("click",function(){
alert("t");
});
Check will always be called before the registered handler.
Note, to block the call, check must return false:
function check(){
return false;//no custom eventlistener fires
return true;//all will fire
}
Use the useCapture flag so you can intercept the event while it's travelling down to the button.
At that point you can perform your check, and if it fails you can call stopPropagation on the event to prevent it from reaching the handlers that are attached to its bubbling phase.
Also, by nature, events are quite bad at managing the order of execution. In general they depend on the order of registration of the listeners.
// code over which you have no control and can't change
var btn = document.getElementById("greeter");
btn.addEventListener("click", function() {
console.log("hello");
})
// code you can add later
function check() {
return Math.random() > 0.5;
}
window.addEventListener("click", function(e) {
var greeter = document.getElementById("greeter");
if (e.target === greeter && !check()) {
e.stopPropagation();
}
}, true)
<button id="greeter">hello world</button>
I am using a function first which adds a class that causes the page to fade to 0 on clicking an anchor tag. How would I add the following...
if style = opacity "0" (in other words function one has successfully completed) add the next function. The code is given below.
They both run independently from there respective triggers but not sure how to ensure that function two runs only on completion of the first.
document.getElementsByTagName("a")[1].addEventListener("click", first);
function first() {
"use strict";
document.getElementById("content").classList.add("animation")
}
function next() {
"use strict";
document.getElementById("profile").classList.add("animation");
}
document.getElementsByTagName("a")[1].addEventListener("click", function(){
document.getElementById("content").add('animation');
next();
});
function next(){
if (document.getElementById("content").contains('animation')) {
document.getElementById("profile").classList.add('animation');
} else {
return false;
}
}
I recommend you to use JQuery, it is much more easier to manipulate css attributes and stuffs. And for pure javascript, I think it was already answered here, it might not be straight answer, but it might help you out.
Use callback functions
function func(value, callback){
//do stuff
callback();
}
In your case
function first(alphavalue, second) {
// do some stuffs
if(alphavalue == 0) {
// run the call back
second();
}else { // do no stuffs }
}
Hope it helps!!
$("#content").on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
// Do something when the transition ends
next();
});
Check transition end event handling and this.
I want the categorycb_change function NOT to be executed when permissioncb_change is in progress, but it does not work.
In the code below I set fireCategoryEvents to false when permissioncb_change is executing, however for some reason this does not prevent category_cb from executing. When I debug I can see that permissioncb_change is done first and only when it is done executing categorycb_change is fired.
(Important note: categorycb_change is triggered within updateGroupCheckboxes within the permissioncb_change function.)
I also tried this with unbinding and rebinding, but the same problem.
What am I doing wrong and or how can I fix this?
.permissioncheckbox and .rolecategory are both html input checkbox elements.
the code behind updateGroupCheckboxes is quite complicated. so I don't think it is useful to show here. (it changes the checkedstate of multiple .rolecategory checkboxes so it triggers the categorycb_change events)
var fireCategoryEvents = true;
$(function () {
$('.permissioncheckbox').change(permissioncb_change, 0);
$('.rolecategory').change(categorycb_change);
});
function permissioncb_change() {
fireCategoryEvents = false;
$(this).attr('data-changed', true);
if (firePermissionEvents) {
updateGroupCheckboxes(this);
}
fireCategoryEvents = true;
}
function categorycb_change() {
if (fireCategoryEvents) {
alert('cat changed');
}
}
I found the solution:
function permissioncb_change() {
$(this).attr('data-changed', true);
if (arguments[0].originalEvent.srcElement.className != 'rolecategory') {
updateGroupCheckboxes(this);
alert('per changed');
}
}
function categorycb_change() {
if (arguments[0].originalEvent.srcElement.className != 'permissioncheckbox') {
alert('cat changed');
}
}
This way I check what the origin of the event was before deciding to run the code.
I am creating a simple function that warns the user when they are about to close out of a web page. I am using the window.onbeforeonload function is javascript. What I am doing is that, I set a variable to false because of the evil window.onbeforeonload function.
function funky() {
var submitFormOkay = false;
window.onbeforeunload = function () {
if (submitFormOkay == false) {
return "You are about to leave this order form. You will lose any information...";
}
}
}
In my html, this is what I am doing
<input type="submit" id="submit_button" onclick="submitFormOkay = true;">
My question however is that I need a way to fire the function funky().
I know I could use an onclick but if I do what is going to set the value of submitFormOkay.
Any help would be appreciated.
Why not make submitFormOkay a parameter of the function funky, and just call it with the given parameter?
<input type="submit" id="submit_button" onclick="funky(true);">
And in the JS file:
function funky(submitFormOkay) {
window.onbeforeunload = function () {
if (submitFormOkay == false) {
return "You are about to leave this order form. You will lose any information...";
}
}
}
Without changing your HTML, I'd do this instead:
window.onbeforeunload = (function(w) {
w.submitFormOkay = false;
return function() {
if (!w.submitFormOkay) {
return "You are about to leave this order form. You will lose any information...";
}
};
})(window);
A problem with ngmiceli's solution is that window.onbeforeunload's callback never gets defined until the user is okay to leave the page.