在将另一个元素添加到HTML之后，JavaScript停止工作

Question

我是Web开发的新手，因此无法获得逻辑。请帮我。我有这个index.html文件。

function unhide() {
  var x = document.getElementById("hiden").innerHTML;
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
function changemenu(x) {
  x.classList.toggle("change");
  unhide();
}

body {
  min-width: 700px;
}
.TopLine {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: black;
}
#withak {
  position: relative;
  top: 15px;
  color: white;
  font-size: 25px;
  font-family: Blackadder ITC;
  padding-left: 50px;
  z-index: 1;
  text-decoration: none;
}
.container {
  top: 15px;
  left: 95%;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  /*border:1px solid red;*/
}
.bar1,
.bar2,
.bar3 {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
  transition: 0.4s;
  /*border:2px solid red;*/
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 6px);
  transform: rotate(-45deg) translate(-5px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -6px);
  transform: rotate(45deg) translate(-5px, -6px);
}
.topnav {
  position: absolute;
  top: 15px;
  left: 70%;
  z-index: 1;
  display: none;
}
.topnav a {
  color: white;
  font-size: 20px;
  padding-left: 15px;
  font-family: Blackadder ITC;
  text-decoration: none;
}
.topnav a:active {
  color: pink;
}
.content {
  position: relative;
  top: 50px;
  left: 20%;
  width: 60%;
  border: 2px solid red;
}

<div class="TopLine">
  <a id="withak" href="index.html">WitHak</a>
  <div class="container" onclick="changemenu(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <div class="topnav" id="hiden">
    <a class="active" href="index.html">About Me</a>
    <a href="myWork.html">My Work</a>
    <a href="blog.html">Blog</a>
  </div>
</div>
<div class="content">
  <h1>About Me</h1>
  <img src="img/welcome.jpg" alt="Welcome">
  <p>Hello, happy to see you here, dear guest!</p>
</div>

与类" content"添加DIV后，JavaScript停止工作。 为什么？我做错了什么？因此，如果删除了这一点：

<div class="content">
        <h1>About Me</h1>
        <img src="img/welcome.jpg" alt="Welcome">
        <p>Hello, happy to see you here, dear guest!</p>
    </div>

没有这个额外的div，一切都在理想情况下工作。我想添加许多其他元素，不要失去脚本的美丽。脚本在做什么。单击它们后，三个菜单行转换为X，Unnides顶部菜单。单击X将再次隐藏菜单。

Answer 1

您的代码中有2个错误

1. 在CSS中，您未设置float：左至.content类。

2. 在Unhide((函数中，您隐藏了html文本内容，war x = document.getElementById('hiden＆quort; hiden＆quort＆quort; niderHtml存储在x variable中，这就是一个原因，这就是显示未定义x.display的错误.STYLE。

您应该写var x = document.getElementById(＆quot; hiden＆quord;

请查看工作片段。

// Code goes here
function unhide() {
  var x = document.getElementById("hiden");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
function changemenu(x) {
  x.classList.toggle("change");
  unhide();
}

/* Styles go here */
body {
  min-width: 700px;
}
.TopLine {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: black;
}
#withak {
  position: relative;
  top: 15px;
  color: white;
  font-size: 25px;
  font-family: Blackadder ITC;
  padding-left: 50px;
  z-index: 1;
  text-decoration: none;
}
.container {
  top: 15px;
  left: 95%;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  /*border:1px solid red;*/
}
.bar1,
.bar2,
.bar3 {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
  transition: 0.4s;
  /*border:2px solid red;*/
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 6px);
  transform: rotate(-45deg) translate(-5px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -6px);
  transform: rotate(45deg) translate(-5px, -6px);
}
.topnav {
  position: absolute;
  top: 15px;
  left: 70%;
  z-index: 1;
  display: none;
}
.topnav a {
  color: white;
  font-size: 20px;
  padding-left: 15px;
  font-family: Blackadder ITC;
  text-decoration: none;
}
.topnav a:active {
  color: pink;
}
.content {
  position: relative;
  top: 50px;
  left: 20%;
  width: 60%;
  border: 2px solid red;
  float: left;
}

<div class="TopLine">
  <a id="withak" href="index.html">WitHak</a>
  <div class="container" onclick="changemenu(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <div class="topnav" id="hiden">
    <a class="active" href="index.html">About Me</a>
    <a href="myWork.html">My Work</a>
    <a href="blog.html">Blog</a>
  </div>
</div>
<div class="content">
  <h1>About Me</h1>
  <img src="img/welcome.jpg" alt="Welcome">
  <p>Hello, happy to see you here, dear guest!</p>
</div>