JavaScript不会运行第一个代码(document.get)下面的代码

Question

<section class="blogSingle">
  <div class="container">
    <div class="row">
      <div class="blogSingle-left col-md-8">
        <div id="content3" class="blogSingleContent"></div>
      </div>
      <div class="blogSingle-right col-md-4">
        <h3>Recent Posts</h3>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p><a href="blogSingle2.html">The last summer days</a></p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking1.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p><a href="blogSingle4.html">A Rare Frog Finds a Mate</a></p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking2.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p>
              <a href="blogSingle3.html"
                >Biological diversity convention manifesto</a
              >
            </p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking1.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p><a href="blogSingle2.html">last summer days</a></p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking2.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p>
              <a href="blogSingle1.html">For a decade romeo lived alone</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

​

const blogSingle1 = [{
  photo: "img/treaking.jpg",
  Topic: "For a decade romeo lived alone",
  Description: `d`
}];
const blogSingle2 = [{
  photo: "img/treaking1.jpg",
  Topic: "The last summer days",
  Description: `c`
}];
const blogSingle3 = [{
  photo: "img/treaking2.jpg",
  Topic: "For a decade romeo lived alone",
  Description: `b`
}];
const blogSingle4 = [{
  photo: "img/treaking.jpg",
  Topic: "For a decade romeo lived alone",
  Description: `a`
}];
const blogSingle5 = [{
  photo: "img/treaking1.jpg",
  Topic: "Protect the planet land and ocean",
  Description: `e`
}];

function blogTemplete1(blogSingle) {
  return `
  <div class ="blogSingle">
  <h3>${blogSingle.Topic}</h3>
  <img src="${blogSingle.photo}" />
  <div class="social-icon-links content-social">
    <div class="social facebook">
      <a href="#"><i class="fab fa-facebook-f mt-2"></i></a>
    </div>
    <div class="social twitter">
      <a href="#"><i class="fab fa-twitter mt-2"></i></a>
    </div>
    <div class="social instragram">
      <a href="#"><i class="fab fa-instagram mt-2"></i></a>
    </div>
    <div class="social google-plus">
      <a href="#"><i class="fab fa-google-plus-g mt-2"></i></a>
    </div>
  </div>
  <p>${blogSingle.Description}</p>
  </div>
  `;
}

document.getElementById("content3").innerHTML = `
${blogSingle1.map(blogTemplete1).join("")}
`;
document.getElementById("content4").innerHTML = `
${blogSingle2.map(blogTemplete1).join("")}
`;
document.getElementById("content5").innerHTML = `
${blogSingle3.map(blogTemplete1).join("")}
`;
document.getElementById("content6").innerHTML = `
${blogSingle4.map(blogTemplete1).join("")}
`;
document.getElementById("content7").innerHTML = `
${blogSingle5.map(blogTemplete1).join("")}
`;

.blogSingleContent h3 {
  font-size: 35px;
  font-weight: 900;
  line-height: 50px;
  margin-top: 95px;
  text-transform: uppercase;
}

.blogSingleContent img {
  max-width: 100%;
  border-radius: 3px;
  margin-top: 5%;
}

.content-social {
  padding-top: 3% !important;
  padding-bottom: 2% !important;
}

.blogSingleContent p {
  text-align: justify;
}


/* BlogSingle Left End */


/* BlogSingle Right Start */

.blogSingle-right h3 {
  font-size: 16.3833px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 12px;
}

.blogSingle-right {
  padding: 100px 50px;
}

.recent-posts {
  display: flex;
  flex-wrap: nowrap;
}

.post-image img {
  height: 50px;
  max-height: 50px;
  max-width: 50px;
  height: 50px;
  border-radius: 3px;
  left: -65px;
}

.post-info span {
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: rgb(83, 98, 111);
}

<section class="blogSingle">
  <div class="container">
    <div class="row">
      <div class="blogSingle-left col-md-8">
        <div id="content3" class="blogSingleContent"></div>
      </div>
      <div class="blogSingle-right col-md-4">
        <h3>Recent Posts</h3>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p><a href="blogSingle2.html">The last summer days</a></p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking1.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p><a href="blogSingle4.html">A Rare Frog Finds a Mate</a></p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking2.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p>
              <a href="blogSingle3.html">Biological diversity convention manifesto</a
                  >
                </p>
              </div>
            </div>
            <div class="recent-posts">
              <div class="post-image">
                <img src="img/treaking1.jpg" alt="..." />
              </div>
              <div class="post-info pl-3">
                <span>28 Mar 2020</span>
                <p><a href="blogSingle2.html">last summer days</a></p>
          </div>
        </div>
        <div class="recent-posts">
          <div class="post-image">
            <img src="img/treaking2.jpg" alt="..." />
          </div>
          <div class="post-info pl-3">
            <span>28 Mar 2020</span>
            <p>
              <a href="blogSingle1.html">For a decade romeo lived alone</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>[The content is shown here][1]
</section>

​

因此content3将完美地显示在一个页面中，但是包含content4和其他内容的页面将不会显示。So the content is not shown here但是如果我将document.getElementById("content4")放在document.getElementById("content3")之上。包含内容4的页面的内容可以工作，但内容3的页面不能工作，基本形成代码，conten3下面的不能运行，如果我把另一个放在它上面，那个特定的可以工作，但其他人不会。

Answer 1

HTML代码中似乎缺少content4, content5, content6, content7。