在向html添加另一个元素后，javascript停止了工作

Question

我是网络开发的新手，所以无法获得逻辑。请帮我。 我有这个index.html文件。

＆＃13;

＆＃13;

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();
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在课程中加入div＆＃34;内容＆＃34; 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并取消隐藏顶部菜单。单击X将再次隐藏菜单。

Answer 1

您的代码中有2个错误

  

  

1. 在css中你没有设置float：left到.content class。

  

2. 在unhide（）函数中隐藏html文本内容，var x = document.getElementById（＆＃34; hiden＆＃34;）。innerHTML存储在x变量中，这就是它显示错误的原因undefined x.display.style。

        

你应该写var x = document.getElementById（＆＃34; hiden＆＃34;）;

请查看工作代码段。

＆＃13;

＆＃13;

// 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();
}

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;