Menu
My index pages’ main section is going to serve as a container I need to replace the current index page content with new content as you select pages from the nav menu. I am brand new to javaScript, but I know there is a simple way to replace content in a container. I have been trying to figure this out for days now.
I do need javaScript, PHP solutions won’t help for this project.
can someone please help?
>It won't let me post the code
// this for loop will open multipul links by looping through them one at a time.
for(let i=0,x=links.length;i<x;++i){
links[i].addEventListener('click',function(e){
e.preventDefault();
fillContainer.src = this.href;
});
}
``<i>
</i><nav> <!-- this nav contains the ancor/s for the variable links in the script below -->
<a href="menu.html" title=>refresh</a>
<a class="htm" href="testPage_1.html" target="container">Test the Container</a>
<a class="htm" href="testpage_2.html" target="container">test again</a>
</nav>
<div id="heading">
<h1 class="header" style="margin-right: 1em;">Container Testing Ground</h1>
</div>
<main id="main">
<!-- this is the iframe for the variable iframe in the script below. -->
<iframe id="container" class="iframe"></iframe>
</main><i>
</i>
``
your code here
`<i>
</i> <a href="testPage_1.html" target="container">Test the Container</a>
<i>
</i> <iframe name="container"></iframe>
>@Lenso43 That could be helpful for another project
>@Lenso43
> the problem I have at the moment is that
> I want to replace content with new content.
``<i>
</i> <main id="main">
</main><i>
</i>
`</CODE>
Then place this javascript right above the closing </body> and enclose it in script tags:
<CODE>
`<i>
</i> const mainContainer = document.querySelector('main');
document.querySelector('nav').addEventListener('click', (event) => {
if (event.target.matches('a')) {
event.preventDefault();
const link = event.target,
destination = link.href;
fetch(destination).then(res => {
return res.text();
}).then(res => {
mainContainer.innerHTML = res;
});
}
});<i>
</i>
``
<i>
</i> <body>
<nav> <!-- this nav contains the ancor/s for the variable links in the script below -->
<a href="menu.html" title=>refresh</a>
<a class="htm" href="testPage_1.html" target="container">Test the Container</a>
<a class="htm" href="testpage_2.html" target="container">test again</a>
</nav>
<i> </i> <div id="heading">
<i> </i> <h1 class="header" style="margin-right: 1em;">Container Testing Ground</h1>
<i> </i> </div>
<i> </i>
<i> </i> <main id="main">
<i> </i> <!-- <iframe id="container" class="iframe"></iframe> -->
<i> </i> <p>Replace this content with new content as links are selected</p>
<i> </i> </main>
<i> </i> const mainContainer = document.querySelector('main');
<i> </i> document.querySelector('nav').addEventListener('click', (event) => {
<i> </i> if (event.target.matches('a')) {
<i> </i> event.preventDefault();
<i> </i> const link = event.target,
<i> </i> destination = link.href;
<i> </i> fetch(destination).then(res => {
<i> </i> return res.text();
<i> </i> }).then(res => {
<i> </i> mainContainer.innerHTML = res;
<i> </i> });
<i> </i> }
<i> </i> });
</body>
>@Lenso43#1641540
> Problem is, I am running out of time.
> Trying to make a few extra bucks to simplify this guys
> page and I'm neither simplifying it or getting it done.