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 和其他页面的页面不会显示。 所以这里没有显示内容但是如果我把 document.getElementById("content4") 放在 document.getElementById("content3") 之上。 包含内容 4 的页面的内容有效，但包含内容 3 的页面的内容基本上形成代码，位于 conten3 下方的代码将无法运行，如果我在其上方放置另一个代码，则特定的代码将起作用，但其他代码则无法运行。

Answer 1

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