隐藏按钮 onClick 以显示通知文本，然后在 5 秒后，再次隐藏文本并重新显示按钮答案

【问题标题】：Hide Button onClick to Show Notice Text, then after 5 seconds, Hide Text Again & Re-Show the Button隐藏按钮 onClick 以显示通知文本，然后在 5 秒后，再次隐藏文本并重新显示按钮
【发布时间】：2022-08-14 04:09:12
【问题描述】：

我想展示（一世）图像作为按钮，当有人点击它时，我想隐藏按钮并显示注意：感谢您的耐心等待！文本，5秒后我想重新显示按钮并隐藏文本。

<button id=\"info\" onClick=\"hideText()\"><img src=\"//i.imgur.com/45PUhN3.png\"/></button>

<div class=\"info-hide\">Notice: thanks for your patience!</div>

我尝试使用此代码，但没有工作：

<script type=\"text/javascript\">
setTimeout(function hideText() {
    $(\"#hide\").fadeOut(\".info-hide\");
}, 5000);
</script>

谢谢！

标签： javascript

【解决方案1】：

尝试以下操作：

<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button>

<div class="info-hide" style="display:none">Notice: thanks for your patience!</div>

<script>
  
  function hideText() {
    // hides text for 5 secs  
    
    const btn = document.querySelector('#info');
    const infoHide = document.querySelector('.info-hide');
    
    infoHide.style.display = "block"
    btn.style.display = 'none'
    setTimeout(()=>{btn.style.display = 'block'; infoHide.style.display= "none"}, 5000)
    
  }

</script>

【讨论】：

谢谢兄弟@Tamir Nakar，这个解决方案也不起作用，但很抱歉，因为我忘了提到我想通过嵌入代码在谷歌网站上运行它
你得到什么错误？
我刚刚在谷歌网站上测试过，它似乎工作。你只需要先发布它。这是我创建的网站的链接：sites.google.com/view/niceonexxxz/%D7%91%D7%99%D7%AA
完毕！我没有正确使用它，现在一切正常，非常感谢@Tamir Nakar 的帮助
很高兴我能帮上忙：）

【解决方案2】：

function hideText() {
      $("#hide").fadeIn()
   setTimeout(() => {
      $("#hide").fadeOut()
  }, 5000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button>

<div class="info-hide" id="hide" style="display: none;">Notice: thanks for your patience!</div>

【讨论】：

谢谢@Ivan Moroz，兄弟，你的解决方案也不起作用，我忘了提到我想通过嵌入代码在谷歌网站上运行它
我修好了兄弟，非常感谢@Ivan Moroz 的帮助

【解决方案3】：

当我们在单击按钮上显示文本时，然后在我们如何在 js 中单击 btn 时消失相同的文本

【讨论】：