Как отключить кнопки 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 в событии click добавьте подсказку или решение к DOM или установите внутренний HTML элемента.

Хорошо, теперь я вижу ваш пример кода - вы можете установите функцию для запуска при загрузке и выберите свой элемент по идентификатору и установите для него отсутствие отображения. Эта страница может помочь вам понять событие загрузки - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Answer 2

Я думаю, вы хотите скрыть содержимое div, а не кнопки, просто установите для своих элементов: 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>

Answer 3

Используйте CSS в заголовке (не как <link>, а фактически встроенный), чтобы эти компоненты были скрыты, а затем используйте JavaScript, чтобы показать их позже.

пример:

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

...

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

...

Затем используйте Javascript, чтобы удалить класс my-secret-div.

Обратите внимание, что это не t скрыть контент от тех, кто может загрузить страницу или «проверить» контент с помощью инструментов разработчика браузера.

Пример скрипта: https://jsfiddle.net/5qnoghrf/