如何让div出现和消失？

Question

我的 ui 上有以下 html 元素

<button onclick="getLocation()">Try It</button>

<p id="long"></p>Longitude<br>
<p id="lat"></p> Latitude<br>
<input type="text" id="ethaddress" placeholder="Enter your ETH address">
<button onclick="writeData()">Submit</button>

当有人访问该站点时，我只想向用户显示“尝试我”按钮。 一旦他单击“尝试我”按钮，我希望此按钮消失，并且我想显示具有 id long、lat 和 ethaddress 以及提交按钮的元素

您可以在此处找到示例链接： http : //shiny-reaction.surge.sh

Answer 1

编辑现在您的问题是在您的 js 文件中，您的getLocation()函数定义为：

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
  //  x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

因此不会隐藏或显示任何内容，您需要更新它。

在 vanilla js 中，你可以试试这个：

 function getLocation(btn){ btn.style.display = "none"; document.getElementById("form").style.display = "block"; }

 #form{ display: none; }

 <button id="button" onclick="getLocation(this)">Try It</button> <form id="form"> <p id="long"></p>Longitude<br> <p id="lat"></p> Latitude<br> <input type="text" id="ethaddress" placeholder="Enter your ETH address"> <button onclick="writeData()">Submit</button> </form>

Answer 2

根据您是否希望元素占用空间，您可以使用visibility: hidden; 或display: none; . 您将应用程序设置为事件侦听器以将显示属性更改为阻止。 您可以使用 addClass 在纯 JS 或 Jquery 中执行此操作。