使用JavaScript更改外部脚本中包含的HTML

Question

I have an element on my website that is hosted externally and referenced in a script on my page.

I want to automatically change the text within this content so that it always displays tomorrow's date.

Script for the widget:

<script src="//my.externalwidget.com/12345.js" type="text/javascript" charset="utf-8" async="async"></script>

HTML contained in external script:

<div id="changeHeaderOne">THIS SHOULD DISPLAY TOMORROW'S DATE</div>

My JS:

<script type="text/javascript">
var currentDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dateParse = currentDate.toString();
var dayAbbr = dateParse.substr(0, 3);
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementById("changeHeaderTwo").innerHTML = "Tomorrow's date is " + dayAbbr + " " + month + "/" + day + "/" + year;
document.getElementById("changeHeaderOne").innerHTML = "Tomorrow's date is " + dayAbbr + " " + month + "/" + day + "/" + year;

I know my script is working because it runs properly on #changeHeaderTwo (located in DOM) but not on #changeHeaderOne (externally hosted and loaded using the script on top).

Any ideas how to make this apply to the externally loaded code as well?

Answer 1

You are using document.getElementByClass() (which should really by document.getElementsByClassName() ) when your div has an id. Use document.getElementById() instead.