Jump to content


Photo

External HTML file into innerHTML


  • Please log in to reply
4 replies to this topic

#1 mordred58

mordred58

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 16 February 2017 - 06:09 PM

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 ();
}


#2 justsomeguy

justsomeguy

    More Human Than Human

  • Moderator
  • PipPipPipPipPipPipPip
  • 29,654 posts
  • Gender:Male
  • Location:Phoenix
  • Languages:Focusing on PHP and JavaScript

Posted 16 February 2017 - 06:32 PM

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.

Know your history: Babbage | Lovelace | Turing | Hopper | Ritchie
ConTEXT Sublime Text Opera PHP MySQL phpMyAdmin
Use a debugger: Firefox, IE, Chrome, Safari, or Opera
Know the foundations of computer science: algorithms, machine architectures, data structures, etc. Don't just blindly copy techniques from application to application. Know what you are doing, that it works, and why it works. Don't think you know what the industry will be in five years time or what you'll be doing then, so gather a portfolio of general and useful skills. Try to write better, more principled code. Work to make "programming" more of a professional activity and less of a low-level "hacking" activity (programming is also a craft, but not just a craft). Learn from the classics in the field and the better advanced textbooks; don't be satisfied with the easily digested "how to" guides and online documentation - it's shallow.
-- Bjarne Stroustrup

He that teaches himself has a fool for a master.
-- Benjamin Franklin (paraphrased)


#3 Ingolme

Ingolme

    Foxy Mod

  • Moderator
  • PipPipPipPipPipPipPip
  • 12,735 posts
  • Gender:Not Telling
  • Interests:Web development, drawing, videogames, foxes.
  • Languages:Javascript, PHP, MySQL

Posted 16 February 2017 - 06:33 PM

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.

Experienced web developer and artist. Forum moderator at W3Schools.com and SEGA.com

kya_signature.png


#4 mordred58

mordred58

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 16 February 2017 - 06:38 PM

Thank you to both of you.  I thought I could do it directly in Javascript.  I'll start looking at AJAX.



#5 justsomeguy

justsomeguy

    More Human Than Human

  • Moderator
  • PipPipPipPipPipPipPip
  • 29,654 posts
  • Gender:Male
  • Location:Phoenix
  • Languages:Focusing on PHP and JavaScript

Posted 16 February 2017 - 06:41 PM

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

Know your history: Babbage | Lovelace | Turing | Hopper | Ritchie
ConTEXT Sublime Text Opera PHP MySQL phpMyAdmin
Use a debugger: Firefox, IE, Chrome, Safari, or Opera
Know the foundations of computer science: algorithms, machine architectures, data structures, etc. Don't just blindly copy techniques from application to application. Know what you are doing, that it works, and why it works. Don't think you know what the industry will be in five years time or what you'll be doing then, so gather a portfolio of general and useful skills. Try to write better, more principled code. Work to make "programming" more of a professional activity and less of a low-level "hacking" activity (programming is also a craft, but not just a craft). Learn from the classics in the field and the better advanced textbooks; don't be satisfied with the easily digested "how to" guides and online documentation - it's shallow.
-- Bjarne Stroustrup

He that teaches himself has a fool for a master.
-- Benjamin Franklin (paraphrased)





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users