Basically I have written a basic code but cannot figure out where is the issue causing it not to work.
so I have the following DOM snippet
<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>
and my script is working as following
var pageLayout = document.getElementById("page-layout");
document.getElementById("contact-page").onclick = function () { pageLayout[0].innerHTML = "<p>this is the contact page</p>";
}
I have taken container by is and not the body because i have the header and the footer in the page that i would like to have remaining in there and only change the inner container layout. What could cause the problem here? I have tried to change the information in the header of my page selecting the element by class and the second line of the js seemed to work perfectly, so the issue lies with my selection of the container by the id?
snippet of the header
<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>
You seem to be pretty close, just use pageLayout instead of pageLayout[0] as you're targetting element by its ID. In this case it will always be the 1st element. In a case where you have to target element through its class only then you must use the position as you did.
One thing I found was wrong while looking through your code is in these lines of code:
var pageLayout = document.getElementById("page-layout");
document.getElementById("contact-page").onclick = function () {
pageLayout[0].innerHTML = "<p>this is the contact page</p>";
}
Where you wrote pageLayout[0]. Since the getElementById() function does not return an array, you should get rid of the "[0]" and just write this in the script:
var pageLayout = document.getElementById("page-layout");
document.getElementById("contact-page").onclick = function () {
pageLayout.innerHTML = "<p>this is the contact page</p>";
}
removing the [0] indeed solved the issue!