如何在页面加载时关闭 javascript 按钮？

Question

我正在尝试创建一个网站，该网站使用提示按钮和解决方案按钮来解决它提供的每个问题。我正在使用一个 javascript 函数和一个按钮，单击时会显示一个新的 div，但它会在页面加载时自动显示提示和解决方案。有没有办法可以设置它以便自动隐藏所有按钮？或者也许我可以让函数在页面加载时运行一次，我认为这会起作用。有任何想法吗？<button onclick="hint0()">Hint</button><div id="hint0">  Try reading the man pages for some of the listed commands on the OverTheWire level page. They may be useful!</div><script>  function hint0() {    var x = document.getElementById("hint0");    if (x.style.display === "none") {      x.style.display = "block";    } else {      x.style.display = "none";    }  }</script>  

Answer 1

没有看到您的代码，很难提供任何反馈，但我可以提出一些建议。您可以使用 css 隐藏您的提示和解决方案 - 将显示设置为无是最简单的。如果您只隐藏提示和解决方案，那么查看页面源代码或检查元素的任何人都可以看到它们。您可以在标记中写入一个空的提示和解决方案容器，然后在用户与按钮交互时添加提示和解决方案文本。使用 Javascript 或 jQuery，在您的点击事件中，将提示或解决方案附加到 DOM 或设置元素的 innerHTML。

好的，我现在看到了你的示例代码 - 你可以设置一个函数在加载时运行并通过 id 选择你的元素并将其设置为不显示。此页面可以帮助您了解加载事件 - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Answer 2

在标头中使用 CSS（不是作为<link>，但实际上是内联的）强制隐藏这些组件，然后使用 JavaScript 稍后显示它们。

例子：

.my-secret-div { 
 display:none;
}

...

<div class="my-secret-div"> the hint goes here </div>

...

然后使用 Javascript 删除my-secret-div该类。

请注意，这不会向可以下载页面或使用浏览器开发人员工具“检查”内容的人隐藏内容。

示例小提琴：https ://jsfiddle.net/5qnoghrf/

Answer 3

我想你的意思是隐藏 div 的内容而不是按钮，只需将你的项目设置为：style="display:none"内联。

function solution0() {

  var x = document.getElementById("solution0");

  if (x.style.display === "none") {

    x.style.display = "block";

  } else {

    x.style.display = "none";

  }

}

function hint0() {

  var x = document.getElementById("hint0");

  if (x.style.display === "none") {

    x.style.display = "block";

  } else {

    x.style.display = "none";

  }

}

  <button onclick="hint0()">Hint</button>

  <div id="hint0" style="display:none">

    Try reading the man pages for some of the listed commands on the OverTheWire level page. They may be useful!

  </div>

  <button onclick="solution0()">Solution</button>

  <div id="solution0" style="display:none">

    You need to use cat to print the contents of the file "readme". The file contains the password that you can copy and paste to log in to bandit1.

  </div>