Using JavaScript To Change the HTML Contained In An External Script - javascript

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?


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

Related

Dynamic HTML Display Current date

I have a quick question.. I am using website builder called 'clickfunnels', and they dont support feature that would allow me to display current date via website. But, I can add custom html to it...
With that said, I found an old Stack Overflow question which is very close to fixing my problem, but this person wanted the current date to show +1 or the next day than the current date.
Here is the coding I tried, which works perfect on the website, I just need it to show the current date and not +1.
Can anyone please give me some tips on editing this? It would be greatly appreciated!!! Thank You!
<span id="spanDate"></span>
<script type="text/javascript">
var months =
['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24));
document.getElementById("spanDate").innerHTML =
months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " +
tomorrow.getFullYear();
</script>

Just remove (1000*3600*24) from tomorrow. It is adding extra day
var months =
['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime());
document.getElementById("spanDate").innerHTML =
months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " +
tomorrow.getFullYear();
<span id="spanDate"></span>

Just remove the setTime line
<span id="spanDate"></span>
<script type="text/javascript">
var months =
['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
/* tomorrow.setTime(tomorrow.getTime() + (1000*3600*24)); */
document.getElementById("spanDate").innerHTML =
months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " +
tomorrow.getFullYear();
</script>

time is not getting updated on page. Any ideas?

I want to show start time and also show the current time. For some reason its not working.
Here is the html
<body >
<label>App Started At: </label><div id="starttime" />
<label >Current Time: </label><div id="nowtime" />
</body>
and java script
var appStartTime = getCurrentTime();
updatetimes();
function updatetimes() {
var nowStr = getCurrentTime();
document.getElementById("starttime").innerHTML = appStartTime;
document.getElementById("nowtime").innerHTML = nowStr;
setTimeout(updatetimes, 5000);
}
function getCurrentTime() {
var now = new Date()
return now.getMonth() + "/" + now.getDate() + "/" + now.getFullYear() + " - " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
}
Code is available at https://jsfiddle.net/nh6mun7L/
Can someone please help?

Don't use a self closing DIV.
E.g., dont do this:
<div />
Do this:
<div></div>
See:
https://jsfiddle.net/nh6mun7L/1/

I have javascript to get new time and date

I have a JavaScript code to get new time. But when i reload the page the time doesn't change instead it says 1/10/2014 10:57, how can i add a function for the time and date to detect and change
Below is the code I tried but its not working.
<script type="text/javascript">
(function () {
// using current UTC time from server as ref, display local time in div id="now"
var now = new Date();
now.setTime(1389322677492);
var nowstr = ""
+ (now.getMonth() + 1) + "/"
+ now.getDate() + "/"
+ ((now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear()) + " "
+ now.getHours() + ":"
+ ((now.getMinutes() < 10) ? '0' + now.getMinutes() : now.getMinutes());
var el = document.getElementById("now");
el.appendChild(document.createTextNode(nowstr));
})();
</script>
Thanks for helping me.

Thats because you are explicitly setting it to 1389322677492 everytime. All you need to do is remove the line:
now.setTime(1389322677492);

I don't know why this script wont't work

For some reason this script won't work. I'm using express, socket.io, jade and node.js.
Here is the script:
var socket = io.connect();
function addMessage(msg)
{
var currentDate = new Date();
var dateTime = currentDate.getDate() + "/" +
(currentDate.getMonth() + 1) + "/" +
currentDate.getFullYear() + "#"
currentDate.getHours() + ":" +
currentDate.getMinutes() + ":" +
currentDate.getSeconds();
$("#historyView").append("<p>" + dateTime + " - " + msg + "</p>");
}
function sentMessage()
{
if ($("#arduinoInput").val() != "")
{
socket.emit("message", $("#arduinoInput").val());
addMessage($('#arduinoInput').val(), new Date().toISOString(), true);
$("#arduinoInput").val("");
}
}
socket.on("message", function(message){
addMessage(message);
});
$document.ready(function(){
$("#submit").click(function(){
sentMessage();
});
});
It doesn't even clear the text box. Here is the jade page:
doctype 5
html
head
title Arduino Controller 2
script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")
script(src="/socket.io/socket.io.js");
script(src="script.js")
link(rel="stylesheet" type="text/css" href="style.css")
body
div.container
header
h1 Arduino Controller 2
center
div#historyView
input(type="text")#arduinoInput
button#submit Send
I've been trying to debug this for awhile. I'm running this on Mac OS X 10.9 if that helps.

Assuming you don't have any other code, this would be incorrect:
$document.ready();
It is likely you meant to attach a ready handler to the document, which should look like this:
$(document).ready();

OpenTextFile gives error Automation server can't create Object

I created this method to create a text file as log for a page that has different buttons that call functions with parameters from different textfields:
function WriteToFile(data) {
var currentdate = new Date();
var datetime = "Time: " + currentdate.getDate() + "/" + (currentdate.getMonth()+1) + "/" + currentdate.getFullYear() + " # " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
var fso = new ActiveXObject("Scripting.FileSystemObject");
var a = fso.OpenTextFile("C:\\logs\\log.txt", 8);
a.WriteLine(datetime);
a.WriteLine(data + "\n");
a.Close();
}
And it works perfectly fine when I'm using the C: drive. Unfonrtunately, this is to be used in production in a Z: drive so other people can use the page as well. When I copy it to the Z: drive and change this line:
var a = fso.OpenTextFile("C:\\logs\\log.txt", 8);
to the following:
var a = fso.OpenTextFile("Z:\\logs\\log.txt", 8);
it gives me an error saying:
Automation server can't create object
I am using IE8. Any ideas on what I'm doing wrong and how I can fix this?

Categories

Resources