if / else语句没有调用函数？

Question

I am going insane here. I have searched and searched and tried a number of different ways, i'm not getting any errors, but I cant get the if/else statement to call the function it is supposed to be calling. the function itself works fine if called otherwise, just not inside the if statement, what is going on??

oops, ok I deleted the "var" in the second part, but its still behaving a bit weird -- what I want it to do, is when the confirm delete button is pushed, to delete the item and close the modal. what its doing instead, is closing the modal, i have to click delete a second time, and then it deletes the item, and the modal quickly pops up the closes itself.

edit: I changed my code to remove event listeners and use onclick in html instead to see if that was the issue, but its not. im still having the same problem.

var clickedCancel = false;
var clickedDelete = false;
//buttons false by defaul
//if cancel button is clicked, set clickedcancel to true.

//if confirm delete button is clicked, set clicked delete to true
function cancelDeletion(){
  clickedCancel = true;
}

function confirmDeletion(){
  clickedDelete = true;
}

function deleteMovie(x){
  //open modal
$('#modalContainerDelete').modal('toggle');


  if (clickedDelete == true){
    movies.splice(x,1);
  addMovieToTable();

  $('#modalContainerDelete').modal('hide');
} else if (clickedCancel == true) {

  $('#modalContainerDelete').modal('hide');
}

};

The biggest issue is, my assignment is I need a delete button that removes a specific item from an array, but I have to code the delete button into a row, and delete the same row the delete button is on, and that part is coded this way:

function addMovieToTable(){
table.innerHTML = "";
for (i=0;i<movies.length;i++){

var row = table.insertRow(0);
var cellTitle = row.insertCell(0);
var cellDirector = row.insertCell(1);
var cellDelete = row.insertCell(2);
cellTitle.innerHTML= movies[i].title;
cellDirector.innerHTML= movies[i].director;
var deleteStuff = "<button onclick='deleteMovie(" + i + ")'>Delete</button>";
cellDelete.innerHTML = deleteStuff;
}

}

the part with the inner html, and the i variable, is what I am trying to code around, I am supposed to make it so before deleting anything, a modal pops up, but this is the main reason im having issues is im trying to code around that without ruining the set up.

Answer 1

Use the following code

var clickedCancel = false;
var clickedDelete = false;
//buttons false by defaul
//if cancel button is clicked, set clickedcancel to true.
var cancelDeletion = document.getElementById("cancelDeletion");
cancelDeletion.addEventListener("click", function () {
    clickedCancel = true;
});
//if confirm delete button is clicked, set clicked delete to true
var confirmDeletion = document.getElementById("deleteConfirm");
confirmDeletion.addEventListener("click", function () {
    clickedDelete = true;
});

function deleteMovie(x) {
    //open modal
    $('#modalContainerDelete').modal('toggle');
    if (clickedDelete == true) {
        movies.splice(x, 1);
        addMovieToTable();
        $('#modalContainerDelete').modal('hide');
    } else if (clickedCancel == true) {
        $('#modalContainerDelete').modal('hide');
    }
};

......

Answer 2

you declare clickedCancel clickedDelete twice remove the second var and it will work fine. Also : its better if you stop the event listener when you done with it and fire it just when you need it to avoid multiple calls

Edit :

Remember if user click cancel button and then try to click delete button it will do nothing because eventlistener still remember the old option ( which is cancel ) thats why you have to find a way to turn that listener off and on to avoid multiple calls. thats why when you try to delete after pressing cancel it didn't work for you ...

this is an example :

    function delete_comment(element, event){
        event.preventDefault();
        // get the post id
        var post_id    = $(element).parents("div.IdHolderDiv").attr("id");
        // get comment id
        var comment_id = $(element).parents('div.singleCommentBox').find('div.CommentdialogboxUnderPOST').attr('id');
    // here is the confirmation button (where user press cancel or delete)
        var confirmBox  = "<div id='confirm_delete_comment' class='w3-modal'>";
            confirmBox += "<div class='alert warning' >";
            confirmBox += "<center><br><br>";
            confirmBox += "<p>Are you sure you want to delete this Comment!</p>";
            confirmBox += "<button class='w3-btn w3-ripple w3-red' > Delete</button>";
            confirmBox += "<button class='w3-btn w3-ripple w3-yellow' > Cancel</button>";
            confirmBox += "<br><br></center></div></div>";
// append the confirmation box to your Dom in an empty div
        $('#confirm_delete').append(confirmBox);
        // make that div visable
        // confirmation message.
        $('#confirm_delete_comment').css('display', 'block');

        // wait user confirmation.
// and here you fire the event listener
        $("#confirm_delete_comment").on("click", "button", function(event){
            event.preventDefault(); 
            var confirm = $(this).text().trim();
// check if user says cancel or delete and then you can turn the listener off
            if( confirm == "Delete" ){
                $.post('public/ajax/delete_comment.php', {post_id:post_id, comment_id:comment_id}, function(data){
                    $.post('public/ajax/comment_get.php', {post_id:post_id}, function(data){
                        // change the counter (comment number at the id of that specific post for full modle and index page)
                        $('#post_'+post_id+'_comments').text(data); 
                        if(indexPage.length){
                            $('#showPostFullScreen #post_'+post_id+'_comments').text(data); 
                        }else if(profilePage.length){
                            $('#showPostFullScreenProfile #post_'+post_id+'_comments').text(data); 
                        }
                        // reload comments.
                        if( $('#modal_post').css('display') == 'none' ){
                            load_comments(post_id); 
                        }else if( $('#modal_post').css('display') == 'block' ){
                            load_commentsFull(post_id);

                        }

                    });
                    // get the notifications
                    load_notifications();
                });
                // remove listner. for older than 1.7 $('#infoarea_display_editon button').unbind('click');
                $('#confirm_delete_comment').off('click button');
                $('#confirm_delete').empty();
            }else if( confirm == "Cancel" ){
                $('#confirm_delete_comment').off('click button');
                $('#confirm_delete').empty();
            }
        });
    }