Как исправить кнопку раскрывающегося списка (HTML)

Всякий раз, когда я пытаюсь что-то изменить в этом коде, я меняю только кнопку и функциональные части, но либо ничего не отображается, либо кнопка не работает, когда я нажимаю кнопку, она должна показывать мотивационные комментарии, для веб-сайта я m делаю, вот код:

function myFunction() {
  button.onclick = myFunction;

  document.getElementById("mot").style.visibility = "visible";
}
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>

<body id = "mot" style = "visibility:hidden;">
  <p>It's harder too read code, then it is too write code</p>
  <p>Practice makes better, not perfect</p>
  <p>Good things take time, the better, the longer</p>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
25
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий
  1. Элемент body должен содержать всю разметку, а не только ее часть. Кроме того, ваш body не был закрыт.

  2. Я использовал div, чтобы сохранить ваши комментарии

  3. button.onclick = myFunction; не будет работать, так как button не определено. Вы также пытаетесь добавить обработчик событий в уже существующий обработчик событий.

function myFunction() 
{
  document.getElementById("mot").style.visibility = "visible";
}
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>

<div id = "mot" style = "visibility:hidden;">
  <p>It's harder to read code than it is to write code</p>
  <p>Practice makes better, not perfect</p>
  <p>Good things take time, the better, the longer</p>
  
</div>

В jquery вы можете сделать это таким образом.

$(document).ready(function(){
  $(".motivation").click(function(){
   $("#mot").toggle();
   });
  });
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>

<button class = "motivation" style = "visibility:visible;">Motivation</button>
<div id = "mot" style = "display:none">
  <p>It's harder too read code, then it is too write code</p>
  <p>Practice makes better, not perfect</p>
  <p>Good things take time, the better, the longer</p>
 </div>

Ваша разметка HTML не соответствует стандарту. Любое содержимое должно быть деформировано внутри тега body. Однако вашему коду не нужно button.onclick = myFunction; функция уже вызывается с атрибутом события кнопки onclick.

Разметка неправильный может работать следующим образом:

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <title>JS Bin</title>
  <script>
    function myFunction() {
  //button.onclick = myFunction;

  document.getElementById("mot").style.visibility = "visible";
}
  </script>
</head>
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>

<body id = "mot" style = "visibility:hidden;">
  <p>It's harder too read code, then it is too write code</p>
  <p>Practice makes better, not perfect</p>
  <p>Good things take time, the better, the longer</p>  
</body>
</html>

Это ДЕМО

Чтобы исправить разметку, как предложил Ли выше, поместите мотивационные комментарии внутри блока div.

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <title>JS Bin</title>
  <script>
    function myFunction() {
  //button.onclick = myFunction;

  document.getElementById("mot").style.visibility = "visible";
}
  </script>
</head>
<body>
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>
<div id = "mot" style = "visibility:hidden;">
  <p>It's harder too read code, then it is too write code</p>
  <p>Practice makes better, not perfect</p>
  <p>Good things take time, the better, the longer</p>
</div>  
</body>
</html>

Другие вопросы по теме