CODEWITHSUNDEEP
javascriptfunctionpromise
elitance
elitance

Reputation: 55

JS Promise Ignored (not sure)

I am working on an alert-similar function in javascript, and I got in trouble. The code of the first function (prepBkCrt) looks like this:

function prepBkCrt() {
    event.preventDefault();
    crtBkMnl = true;
    crtBkCnl = false;
    const url = crtBkTab.querySelector("#url");
    const name = crtBkTab.querySelector("#name");
    if (name.value.length >= 17) {
        poper("Bookmark","I will pass this part",true).then((response) => {
            if (response === false) {
                crtBkCnl = true;
                hideBkTab();
                return;
            }
        });
    }
    addBookmark(url.value,name.value);
    if (crtBkCnl === false) {
        poper("Bookmark","Bookmark successfully created!",false);
    }
    url.value = "";
    name.value = "";
}

and the second function looks like this:

function poper(headerTxt, descTxt, option) {
    return new Promise((resolve, reject) => {
        const poper = document.querySelector("#poper");
        const header = poper.querySelector("h2");
        const buttonDiv = poper.querySelector("div");
        const desc = poper.querySelector("span");
        header.innerText = headerTxt;
        desc.innerHTML = descTxt;

        const yBtn = buttonDiv.querySelectorAll("button")[0];
        yBtn.addEventListener("click", (event) => {poper.style.transform = "translateY(-300px)"; resolve(true);});
        
        const nBtn = buttonDiv.querySelectorAll("button")[1];
        nBtn.addEventListener("click", (event) => {poper.style.transform = "translateY(-300px)"; resolve(false);});

        if (option === false) {
            nBtn.style.display = "none";
        } else {
            nBtn.style.display = "block";
        }

        poper.style.transform = "none";
        setTimeout(() => {poper.style.transform = "translateY(-300px)"; resolve(false);},10000);
    });
}

This used to work well on other code, but it seems to not work on this javascript file. I've checked that it does run the first poper function in prepBkCrt function, which is the problem. The expected behavior is if the name.value's length is over 17, it should run poper function (it should work like this, and run this one, but the code only runs the second image. What's the problem?

Upvotes: 1

Views: 51

Answers (1)

Bergi
Bergi

Reputation: 665536

You seem to be looking for an else statement. The return inside the .then() callback does not break from prepBkCrt.

function prepBkCrt() {
    event.preventDefault();
    crtBkMnl = true;
    crtBkCnl = false;
    const url = crtBkTab.querySelector("#url");
    const name = crtBkTab.querySelector("#name");
    if (name.value.length >= 17) {
        poper("Bookmark","I will pass this part",true).then(response => {
            if (response === false) {
                crtBkCnl = true;
                hideBkTab();
            }
        });
    } else {
        addBookmark(url.value,name.value);
        poper("Bookmark","Bookmark successfully created!",false);
        url.value = "";
        name.value = "";
    }
}

Upvotes: 1

Related Questions