#javascript #html #css
Вопрос:
function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } let pst_added = `lt;div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;"gt; lt;divgt; lt;spangt; lt;bgt; ` usrInp.value `lt;/bgt; lt;/spangt; lt;/divgt; lt;div class="date"gt;lt;/divgt; lt;div class="post"gt;lt;pgt;` pstInp.value `lt;/pgt;lt;/divgt; lt;/divgt;`; post__body.innerHTML = pst_added if (usrInpStr.length gt; 0 amp;amp; pstInpStr.length gt; 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; } lt;divgt; lt;button type="submit" onclick="Post()" id="post"gt;Postlt;/buttongt; lt;/divgt; lt;!-- begin snippet: js hide: false console: true babel: false --gt; Вот моя кнопка, она находится в функции, и когда функция выполняется, кнопка становится зеленой и меняет свой внутренний текст. Я хочу, чтобы эти изменения происходили всего 3 секунды, а затем возвращались к нормальному состоянию, которое является CSS. Я старался не копировать весь свой код, но если мне понадобится более подробная информация в моем коде, пожалуйста, дайте мне знать. Мой js запускает мой код через 2 секунды, что противоположно тому, что я хочу.
Комментарии:
1. Куда вы вызываете свой javascript? После тела?
2. Я просто добавил больше деталей, это в основном сообщение, и когда HTML публикуется, моя кнопка меняется.
3. Пожалуйста, приведите минимальный воспроизводимый пример
Ответ №1:
Вы можете использовать a Promise , чтобы подождать определенный период времени и снова изменить фон.
Приведенный async ниже IIFE предназначен для того, чтобы его можно 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) =gt; new Promise(resolve =gt; setTimeout(resolve, ms)); function Post() { let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == "") { alert("Empty Field") return false } let pst_added = `lt;div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;"gt; lt;divgt; lt;spangt; lt;bgt; ` usrInp.value `lt;/bgt; lt;/spangt; lt;/divgt; lt;div class="date"gt;lt;/divgt; lt;div class="post"gt;lt;pgt;` pstInp.value `lt;/pgt;lt;/divgt; lt;/divgt;`; post__body.innerHTML = pst_added if (usrInpStr.length gt; 0 amp;amp; pstInpStr.length gt; 0) { (async () =gt; { 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; } lt;div id="post__body"gt; lt;divgt; lt;button type="submit" onclick="Post()" id="post"gt;Postlt;/buttongt; lt;/divgt; lt;/divgt;