页面的布局不会随js而改变。

Question

基本上，我已经写了一个基本的代码，但不知道是哪里的问题导致它不工作。

所以我有下面的DOM片段

<div class="container" id="page-layout">
    <h1>Lets start <span>getting a little</span> more fancy!</h1>
    <img src="../images/tiger.jpg" alt="tiger image">

    <div class="columns" >
        <div class="col col-1">
            <h2>Dolor sit</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat distinctio quo ratione vitae cupiditate aliquid eos magni quisquam nesciunt commodi perferendis, et maiores molestias similique quam illo dolorum consequatur. Repellat!</p> <!--30-->
        </div> 
</div>

我的脚本如下所示

 var pageLayout = document.getElementById("page-layout");
    document.getElementById("contact-page").onclick = function () { pageLayout[0].innerHTML = "<p>this is the contact page</p>";
}

我采取容器的is，而不是身体，因为我有页眉和页脚，我希望有留在那里，只改变内部容器布局。是什么导致了这里的问题？我试图更改页面标题中的信息，按类选择元素，而js的第二行似乎工作得很好，所以问题在于我通过id选择了容器？

标题的片段

   <header>
        <div class="container container-nav">
        <div class="title">
        <h1 id="title-header"> My header  </h1>
        <p class="sub-title">A blog about something </p>


        </div>
        <nav>
            <ul>
                <li><a href="#" class="current-page">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#" id="contact-page">Contact</a></li>
            </ul>
        </nav>
        </div> <!--close of the container-->
    </header>

Answer 1

在查看您的代码时，我发现了一件错误的事情是在下面的代码行中：

var pageLayout = document.getElementById("page-layout");

document.getElementById("contact-page").onclick = function () { 
    pageLayout[0].innerHTML = "<p>this is the contact page</p>";
}

你写pageLayout[0]的地方。由于getElementById()函数不返回数组，所以应该去掉"“，只需在脚本中编写：

var pageLayout = document.getElementById("page-layout");

document.getElementById("contact-page").onclick = function () { 
    pageLayout.innerHTML = "<p>this is the contact page</p>";
}

Answer 2

您似乎非常接近，只需使用pageLayout而不是pageLayout[0]，因为您要按其ID来获取元素。在这种情况下，它将始终是第一个元素。在这样的情况下，您必须通过它的类来定位元素，那么您就必须像以前一样使用这个位置。

Answer 3

移除确实解决了的问题！