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 class="date"></div> <div class="post"><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 -->Aquí está mi botón, está en una función y cuando se ejecuta la función, el botón se vuelve verde y cambia su HTML interno. Quiero que esos cambios sucedan solo por 3 segundos y luego vuelvan a la normalidad, que es el CSS. Traté de no copiar todo mi código, pero si necesito más detalles en mi código, házmelo saber. Mi js ejecuta mi código 2 segundos después, que es lo contrario de lo que quiero.
Puede usar una Promise para esperar un período de tiempo específico y volver a cambiar el fondo.
El IIFE async a continuación es para permitir que se use await .
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 class="date"></div> <div class="post"><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>