Upon clicked the button executes its function which also changes it looks and i want the look to cha-CodePudding

function Post(){
    let pstInpStr = pstInp.value
    let usrInpStr = usrInp.value
    
if (usrInpStr == "" || pstInpStr == ""){
        alert("Empty Field")
        return false
    } 
    let pst_added =
    `<div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;">
        <div> <span> <b> `  usrInp.value  `</b> </span> </div>
        <div ></div>
        <div ><p>`  pstInp.value  `</p></div>
    </div>`;

    post__body.innerHTML  = pst_added

    if (usrInpStr.length > 0 && pstInpStr.length > 0){
        usrInp.value = ""
        pstInp.value = ""
        setTimeout(function(){
        post.style.background = "rgb(37, 202, 31)"
        post.innerHTML = "Posted ✔️"}, 2000)
    } 
}

#addPost button{ 
    width: 100%;
    height: 39px;
    cursor: pointer;
    background: rgb(227, 69, 41);
    border: 1px solid lightgray;
}

 <div>   
       <button type="submit" onclick="Post()" id="post">Post</button>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

Here is my button, it's in a function and when the function is executed the button turns green and changes its innerHTML. I want those changes to happen for only 3seconds and then go back to normal which is the CSS. I tried to not copy all my code but if I need more details in my code please let me know. My js runs my code 2 seconds later which is the opposite of what I want.

CodePudding user response：

You can use a Promise to wait a specific period of time, and change the background back.

The async IIFE below is to allow await to be used.

pstInp = {
  "value": "Some string",
}

usrInp = {
  "value": "Hello, General Kenobi",
}
/* The above is only for the snippet to work, please don't include it in your real code! ;) */

const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));

function Post() {
    let pstInpStr = pstInp.value
    let usrInpStr = usrInp.value

    if (usrInpStr == "" || pstInpStr == "") {
        alert("Empty Field")
        return false
    }
    let pst_added =
        `<div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;">
    <div> <span> <b> `   usrInp.value   `</b> </span> </div>
    <div ></div>
    <div ><p>`   pstInp.value   `</p></div>
</div>`;

    post__body.innerHTML  = pst_added

    if (usrInpStr.length > 0 && pstInpStr.length > 0) {
        (async () => {
            usrInp.value = ""
            pstInp.value = ""
            post.style.background = "rgb(37, 202, 31)"
            post.innerHTML = "Posted ✔️"
            await wait(2000);
            post.innerHTML = "Post"
            post.style.background = "rgb(239, 239, 239)"
        })();
    }
}

#addPost button {
  width: 100%;
  height: 39px;
  cursor: pointer;
  background: rgb(227, 69, 41);
  border: 1px solid lightgray;
}

<div id="post__body">    
    <div>
      <button type="submit" onclick="Post()" id="post">Post</button>
    </div>
</div>