mordred58

External HTML file into innerHTML

5 posts in this topic

I am attempting to create an online "manual" with a html files and an array. I've been able to get the string name of the html file to appear, but not the content of the page. Where am I going wrong?

function referencePages () {
	
	var rCurrentPage = 0;
	
	var refArray = ["R00_Ref_Cover.html", "R01_Abbreviations.html","R02_Definitions.html"];
	
	var rTotalPages = refArray.length;
	
	document.getElementById("page_content").innerHTML = refArray[rCurrentPage];
	
	rNextButton ();
	
	rBackButton ();
}

Share this post


Link to post
Share on other sites

The innerHTML property is not a URL to load, it is the actual HTML string to load. You need to send an ajax request to get the contents of the page and then put that in the innerHTML. Also note that each sub-page should not be a complete HTML document, it should only be the HTML that would go inside that element just as if you copy and paste it into that element. It's not a complete document with a doctype, head, body, etc, it's just the markup that you want inside that element.

Share this post


Link to post
Share on other sites

All you're doing is giving it a string. If you want to load content from other files you should read the AJAX tutorial. It's more complicated than just assigning a string.

Share this post


Link to post
Share on other sites

Ajax is Javascript also, it's just a term for sending a request with Javascript.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now