This is my code, but I don't know how to debug it. Please help me and my code. I am trying to add a hide/show button for my contents list, but I don't know what is wrong with it. It is greatly appreciated. Ummm... I don't know what to say as I have to add more information. Just comment to ask any queries.
<!DOCTYPE html>
<html>
<head>
<title>How to be Asian</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
border: 0px;
margin: 2px;
}
h2
{
text-indent: 20px;
}
ul {
margin-top: 2%;
}
body {
margin: 2px;
border: 5px;
padding: 13px;
}
#Contents {
display: table;
padding: 7px;
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
font-size: 95%;
text-align: left;
float: right;
width: 15%;
}
#Quote {
text-align: center;
line-height: 2em;
padding-left: 25%;
padding-right: 25%;
padding-top: 20px;
padding-bottom: 20px;
display: block;
}
.Bonus {
display: inline;
font-size: 1.3em;
}
body{
padding: 1%;
margin: 1%
}
p h1{
display: inline;
float: left;
}
</style>
</head>
<body>
<script>
function myFunction() {
var x = document.getElementById("Contents");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="Contents">
<h1 id="Contents">Contents</h1><button onclick="myFunction()">[show]</button>
<ol>
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>
<div>
<h1 id="Chapter_1">Chapter 1: Early Childhood</h1>
<p>When Asian kids go through pre-schooling years and primary school, children are always put under pressure and always neglected so that they work harder and feel like they are worth something after some time and not actually useless.<br><span id="Quote">"We just never praise our children, always compare them to people who are better, so they grow up never feeling good enough and then have to constantly outdo everybody else to feel like they aren’t worthless." <br> Quoted from Stven He's father</span></p>
</div>
<div>
<h1 id="Chapter_2">Chapter 2: Primary School Education</h1>
<p>Asian kids are always compared to their peers by their parents. This is because Asian parents want the best of the child. This also means that children are used too much for the simplest of their demands. <br> <br> During this period of learning, PTSD is most used so that children are trained to cope "in the future". "In the future" meaning whenever you go back to your parents house when you are and adult. But this training will deal emotional damage, social anxiety and negliegence. This part of life is when most of the tactics are used so that the child can get used to them. Once they know how to leave the situation, create more problems for the child so that they get more experience. </p>
<p>This period of their life is when you can take advantage of them. For example, when you are shopping, tell your child that you are going to get something common in the household, like rice. Then, go to the aisle and watch them go to the cashier person and panic as you are assumed to get rice. Once they start getting constipated, go back with a 5kg bag of rice and start telling your child off for constipating in public. </p>
<div style="text-align: center;">
<h4 >BONUS! </h4><p >If you can humiliate your child in front of anyone, especially your child's friends, it will intergrate information for life. </p>
</div>
</div>
<div>
<h1 id="Chapter_3">Chapter 3: High School Education</h1>
<p>This period of life is when you get to choose his choices. </p>
</div>
<div>
<h1 id="Chapter_4">Chapter 4: College/University Education</h1>
</div>
<div>
<h1 id="Chapter_5">Chapter 5: Employment</h1>
</div>
<div>
<h1 id="Chapter_6">Chapter 6: Relationships</h1>
</div>
<div>
<h1 id="Chapter_7">Chapter 7: Family Gatherings</h1>
<h2 id="Chapter_7.1">Chapter 7.1: Public Holidays</h2>
<h2 id="Chapter_7.2">Chapter 7.2: Death and mourning</h2>
</div>
<div>
<h1 id="Chapter_8">Chapter 8: Retirement</h1>
</div>
<div>
<h1 id="Chapter_9">Chapter 9: Death</h1>
</div>
</body>
</html>
CodePudding user response：
I ran your code, Its fine function wise but the button hides with the div. I guess that's the problem you are referring to.
Now a few things.
- Ids should be treated as unique so don't give the same id to many tags, use class instead.
- The button that hides the content needs to be outside the container that you are trying to hide.
<!DOCTYPE html>
<html>
<head>
<title>How to be Asian</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
border: 0px;
margin: 2px;
}
h2
{
text-indent: 20px;
}
ul {
margin-top: 2%;
}
body {
margin: 2px;
border: 5px;
padding: 13px;
}
#Contents {
display: table;
padding: 7px;
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
font-size: 95%;
text-align: left;
float: right;
width: 15%;
}
#Quote {
text-align: center;
line-height: 2em;
padding-left: 25%;
padding-right: 25%;
padding-top: 20px;
padding-bottom: 20px;
display: block;
}
.Bonus {
display: inline;
font-size: 1.3em;
}
body{
padding: 1%;
margin: 1%
}
p h1{
display: inline;
float: left;
}
</style>
</head>
<body>
<script>
function myFunction() {
var x = document.getElementById("Contents");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<button onclick="myFunction()">[show]</button>
<div id="Contents">
<h1>Contents</h1>
<ol>
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>
<div>
<h1 id="Chapter_1">Chapter 1: Early Childhood</h1>
<p>When Asian kids go through pre-schooling years and primary school, children are always put under pressure and always neglected so that they work harder and feel like they are worth something after some time and not actually useless.<br><span id="Quote">"We just never praise our children, always compare them to people who are better, so they grow up never feeling good enough and then have to constantly outdo everybody else to feel like they aren’t worthless." <br> Quoted from Stven He's father</span></p>
</div>
<div>
<h1 id="Chapter_2">Chapter 2: Primary School Education</h1>
<p>Asian kids are always compared to their peers by their parents. This is because Asian parents want the best of the child. This also means that children are used too much for the simplest of their demands. <br> <br> During this period of learning, PTSD is most used so that children are trained to cope "in the future". "In the future" meaning whenever you go back to your parents house when you are and adult. But this training will deal emotional damage, social anxiety and negliegence. This part of life is when most of the tactics are used so that the child can get used to them. Once they know how to leave the situation, create more problems for the child so that they get more experience. </p>
<p>This period of their life is when you can take advantage of them. For example, when you are shopping, tell your child that you are going to get something common in the household, like rice. Then, go to the aisle and watch them go to the cashier person and panic as you are assumed to get rice. Once they start getting constipated, go back with a 5kg bag of rice and start telling your child off for constipating in public. </p>
<div style="text-align: center;">
<h4 >BONUS! </h4><p >If you can humiliate your child in front of anyone, especially your child's friends, it will intergrate information for life. </p>
</div>
</div>
<div>
<h1 id="Chapter_3">Chapter 3: High School Education</h1>
<p>This period of life is when you get to choose his choices. </p>
</div>
<div>
<h1 id="Chapter_4">Chapter 4: College/University Education</h1>
</div>
<div>
<h1 id="Chapter_5">Chapter 5: Employment</h1>
</div>
<div>
<h1 id="Chapter_6">Chapter 6: Relationships</h1>
</div>
<div>
<h1 id="Chapter_7">Chapter 7: Family Gatherings</h1>
<h2 id="Chapter_7.1">Chapter 7.1: Public Holidays</h2>
<h2 id="Chapter_7.2">Chapter 7.2: Death and mourning</h2>
</div>
<div>
<h1 id="Chapter_8">Chapter 8: Retirement</h1>
</div>
<div>
<h1 id="Chapter_9">Chapter 9: Death</h1>
</div>
</body>
</html>CodePudding user response：
So it seems that you "hide/show" button hides the whole div called "Contents". meaning that the button also disapears. So you have to make it so that only the <ol> element get hidden.
You can do this by using the same code part but have a ID on the <ol> element like "ContentTable" and then instead targeting the "Contents" target the element "ContentTable". This way when you press the "hide" button it will still show the div and therefore the button is still there. Allowing you to press the button again to "show" the contents table again.
Like this:
<script>
function myFunction() {
var x = document.getElementById("ContentsTable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="Contents">
<h1>Contents</h1><button onclick="myFunction()">[show]</button>
<ol id="ContentsTable">
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>