How do I fix a dropdown button (HTML)-CodePudding

Whenever I try to change the things in this code, I'm only changing the button and function parts, but either nothing shows, or the button dosent work, when I click the button, it should show motivational comments, for a website I'm making, here's the code:

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>

CodePudding user response：

Your body element should contain all of your markup, not just some of it. Also, your body wasn't being closed.
I've used a div to hold your comments
button.onclick = myFunction; wouldn't work as button is undefined. You also are trying to add an event handler inside an already existing event handler.

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>

CodePudding user response：

In jquery you can do it this way.

$(document).ready(function(){
  $(".motivation").click(function(){
   $("#mot").toggle();
   });
  });

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<button  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>

CodePudding user response：

Your HTML markup is not standard correct. Any contents should be warped inside the body tag. However, your code does not need button.onclick = myFunction; the function is already called with the onclick button event attribute.

The incorrect markup may work like:

<!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>

This is a DEMO

To fix markup as Lee suggested above, place the motivational comments inside a 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>