页面加载时如何将 javascript 按钮切换为关闭？

Question

I'm trying to create a website that uses a hint button and a solution button to each of the problems it provides. I'm using a javascript function and a button that shows a new div when clicked, but it automatically shows the hint and solution as the page loads.

Is there a way I can set it so all buttons are automatically hidden? Or maybe can I get the function to run once as the page loads, I think that would work. Any ideas?

<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

Without seeing your code, it's a little difficult to give any feedback, but I can suggest a few things. You can use css to hide your hint and solutions - setting the display to none would be the easiest. The hints and solutions would be visible to anyone who viewed the page source or inspected the elements, if you only hide them. You could write an empty hint and solution container into your markup and then add the hint and solution text when the user interacts with the button. With Javascript or jQuery, on your click event, append the hint or solution to the DOM or set the innerHTML of the element.

Ok, I see your example code now - you can set a function to run on load and select your element by id and set it to display none. This page can help you understand the load event - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Answer 2

Use CSS in the header (not as a <link> , but actually inlined) to force those components hidden, then use JavaScript to show them later.

example:

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

...

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

...

Then use Javascript to remove the my-secret-div class.

Note that this doesn't hide the content from someone who could download the page or "inspect" the content using the browser developer tools.

Example fiddle: https://jsfiddle.net/5qnoghrf/

Answer 3

I think you mean to hide content of div not the buttons, just set your items to: style="display:none" inline.

 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>