Display a JavaScript variable in a page loaded in innerHTML

Question

I have an HTML page that loads within another HTML page via innerHTML. After several days of work, this script works fine and another JS file is called for the interior page, a file (named "Unified_app.js") that basically runs some date calculations. Everything is working fine and the correct dates print to the console. However, I can't figure out on the page within a page can display the console dates. Document.write does not work in this situation (I'm assuming because of the tags are not read properly?), so I need to come up with a workaround. Any ideas?

This is the innerHTML functions as I have them:

function getYearOffset(strCutoffDate, intYearOffset)
{
  var datCurrentDate = new Date();
  var intCurrentYear = datCurrentDate.getFullYear();
  var intCurrentMonth = strCutoffDate.substr(5, 2) - 1;
  var intCurrentDay = strCutoffDate.substr(8, 2);
  var datCutoffDate = new Date(intCurrentYear, intCurrentMonth, intCurrentDay);

  if (Number(datCurrentDate) < Number(datCutoffDate))
  {
    var datRequestedDate = new Date(datCurrentDate.getFullYear(), intCurrentMonth, intCurrentDay);
  }
  else
  {
    var datRequestedDate = new Date(datCurrentDate.getFullYear() + intYearOffset, intCurrentMonth, intCurrentDay);
  }
return datRequestedDate.getFullYear();
}

var script = document.createElement("script");
script.src = "/resource/resmgr/scripts/Unified_app.js";
document.head.appendChild(script);


function getInclude(strIncludeContainer, strIncludeURL)
{
  var strPage = '';
  var intIndexOfBodyOpen = 0;
  var intIndexOfBodyClose = 0;
  var objXhttp;

  objXhttp = new XMLHttpRequest();
  objXhttp.onreadystatechange = function()
  {
    if (this.readyState == 4 && this.status == 200)
    {
      strPage = this.responseText;
      intIndexOfBodyOpen = strPage.indexOf('<body>');
      intIndexOfBodyClose = strPage.indexOf('</body>');
      document.getElementById(strIncludeContainer).innerHTML = strPage.substring(intIndexOfBodyOpen + 6, intIndexOfBodyClose);
    }
  };
  objXhttp.open("GET", strIncludeURL, true);
  objXhttp.send();
}

I'm using:

<script>document.write(award_year1);</script>

to write the following date calls:

const date = new Date();
let offset = 0;
const threshold = new Date();
threshold.setMonth(3); //January is 0!
threshold.setDate(3);
if (Date.now() > threshold) { 
  offset = 1;
}
var theDate = new Date();
var award_year1 = date.getFullYear() + offset;
var award_year2 = date.getFullYear() + 1 + offset;

console.log(award_year1);
console.log(award_year2);

When loading the page-within-a-page HTML file or the interior page itself I get the correct date calculations sent to the console, but I can't seem to get them to print within the innerHTML page when loaded into the other page. Any ideas you could send me down the right path? This is probably beyond my level of understanding of JavaScript. I thought perhaps my code was not in the correct order but I've been fiddling with this and can't seem to figure out where or why.

@PatrickEvans That is what I assumed the issue was. Is there a workaround for this issue? Another way to print from console into HTML without script tags? — beingbecoming, Jun 09 '18 at 15:24
You could import / export the other javascript files? Or you can make a XML request aswell — Dennis Spierenburg, Jun 09 '18 at 15:32
@DennisSpierenburg Thanks for the suggestion. It is not really an entire javascript file. That seems cumbersome. I am only trying to print two dates into the HTML. This was so much easier to accomplish with a PHP include :( — beingbecoming, Jun 09 '18 at 15:35
@beingbecoming php can include it much faster ofcourse cause its serverside rendered. Javascript unforutnally can not do that yet (except module es6 and higher) — Dennis Spierenburg, Jun 09 '18 at 15:37
@DennisSpierenburg Yes, I am converting an old site done in PHP to a new CMS that does not support server-side languages. So I'm trying to come up with a solution to this issue that was not there before — beingbecoming, Jun 09 '18 at 15:38

score 0 · Answer 1 · answered Jun 09 '18 at 15:46

I'm not sure if this will solve the problem but you can try it. As you said the document.write will not be triggered cause your JS is loaded before your DOM is.

document.addEventListener("DOMContentLoaded", function(event) {
    //your functions
});

Maybe this will help you out

score 0 · Answer 2 · answered Jun 09 '18 at 18:19

0

I guess this is just not possible. I ended up replacing the innerHTML with an iframe and that seems to have worked so that I can now use script tags. Not an ideal solution but it works

answered Jun 09 '18 at 18:19

beingbecoming

73
8

Display a JavaScript variable in a page loaded in innerHTML

2 Answers2