Javascript in HTML does not execute - javascript

<html>
<head>
<title>Test Environment</title>
</head>
<body>
<script>
document.bgColor="#222222";
document.fgColor="#11EE11";
document.writeln("Test Environment.");
document.writeln("Last Update: " + document.lastModified);
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = dd+'/'+mm+'/'+yyyy;
function enterExpenses(){
var _desc = window.prompt("What kind of expenses?");
var _amount = window.prompt("Amount spent?");
var _entry = {type:_desc amount:_amount date:today};
document.writeln(_entry.date);
document.writeln(_entry.type);
document.writeln(_entry.amount);
}
</script>
<form>
<button onclick="enterExpenses()">Click me</button>
</form>
</body>
</html>
I hate to be the guy asking others to do my work but I can't figure out why it doesn't work. I'm trying to learn javascipt and I've completed the codecademy course. Now I'm actually trying to work with it and put it to use and I can't figure out why my script is not executed.
Anyone's expertise I can borrow for a second?

Maybe it is because of a typo in this line
var _entry = {type:_desc amount:_amount date:today};
You should separate object properties by a comma
var _entry = {type:_desc, amount:_amount, date:today};

Aside form Muhammad's answer, use this for your button:
<button type="button" onclick="enterExpenses()">Click me</button>
Not specifying the "type" attribute for buttons will make it a submit button, sending your form to the form's action page.

Related

Adding a manufacturing lead time to website Javascript to HTML

I'm using a CMS system that works alongside a backend that we must use. I'm trying to have it display a production lead time date such as www.customink.com. Current day +10 business days I'm using a HTML widget in this custom CMS, so I'm not sure if that is relevant. I'm struggling getting it to show up, and I really have no idea what I'm doing. I tried my best lol. Here's what I have thus far.
EDIT: Also, If I want it to only display M-F how do I go about that? I want it to read - Guaranteed by Fri, Oct 11.
<html>
<body>
<script>
document.getElementById("p1").innerHTML = newDate;
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
var newDate = addDays(new Date(), 10);;
</script>
</body>
</html>
document.getElementById("p1").innerHTML = newDate;
In this statement, what you are doing is trying to find the DOM element with id p1 and then setting the value of newDate variable as its value. Therefore you should define an element with such id before your script block.
Then you are declaring and setting the value of the newDate after you have set the value for the above element. But you should do it before that.
See the fixed code below.
(I have used a <div> element as the p1 element. But you can use any other options such as <span>, <h1>, <h2>, etc. based on your requirement.)
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
</head>
<body>
<div id='p1'></div>
<script>
var newDate = addDays(new Date(), 10);
document.getElementById("p1").innerHTML = formatDate(newDate);
function addDays(theDate, days) {
//return new Date(theDate.getTime() + days*24*60*60*1000);
return moment(theDate).add(days, 'd').toDate();
}
function formatDate(date) {
return moment(date).format('[Guaranteed by] ddd, MMM DD');
}
</script>
</body>
</html>

How can I add a date and time clock to a website?

I need to add a date and time clock to a website. It should display the date and time in a very specific format, taking up two lines and using an intended timezone of GMT-4; for example:
Sat, Mar 23 2019
10:33:56 PM
This happens to be for a school project, but I have limited knowledge of Javascript. I've tried looking up some examples and have found some interesting stuff, but I'm unable to adapt those examples to generate the output in the desired format.
Please Try This
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var CDate = new Date()
var NewDate=CDate.toDateString();
NewDate = NewDate + " - " + CDate.toLocaleTimeString();
document.getElementById('ct').innerHTML = NewDate;
display_c();
}
<html>
<head> </head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
For Change Date Or Time Format Please Refer this link
Get currentDate by toDateString() method and get current time by toLocaleTimeString and append both in your DOM . And call this every 1000 ms to get updated value .
function callDateTime(){
var currentDate=(new Date()).toDateString();
var currentTime=(new Date()).toLocaleTimeString();
document.getElementById('watch').innerHTML=`${currentDate}-${currentTime}`;
}
setInterval(function(){ callDateTime() }, 1000);
<p id="watch"></p>
You can add an HTML to your the body of your document:
Also, you can add a JavaScript similar to this before </body>:
Code:
function clock(){
window.rt=1000;r=0;
document.getElementById('t-0').textContent=new Date().toLocaleDateString(); // today
var m=setInterval(function(){
if(r>84600){clearInterval(m);}
r++;
document.getElementById('t-2').textContent=new Date().toLocaleTimeString(); // clock
}, window.rt);
}
<!DOCTYPE html>
<html lang="en">
<title>Clock</title>
<body onload="clock();">
<div style="text-align:center;">
📅
<b id="t-0">00/00/0000</b>
⏰
<b id="t-2">00:00:00</b>
</div>
</body>
</html>

How to start jquery countdown from datepicker form input?

I'm building a simple webpage for wedding event. Let's say that I need to show a countdown and I want to get the date to start it from an input form. I've been googling a lot and I've seen some interesting code but it's late and my eyes and mind are very tired. This is my code...
<?php $date = date('2017/05/21'); // this value supossed to be taken from a form.?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="clock"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://www.testingserver.dev/template/assets/web/assets/jquery/jquery.countdown.min.js"></script>
<script>
var eventdate = new Date("<?php echo $date; ?>"); // I'm trying to use a php variable in jquery.
$('#clock').countdown('eventdate', function(event) {
var $this = $(this).html(event.strftime(''
//+ '<div style="background-color: #ffcc00; width: 25%;"><p>Weeks<br>%w</p></div> '
+ '<span>%D</span> days '
+ '<span>%H</span> hrs '
+ '<span>%M</span> min '
+ '<span>%S</span> sec'));
});
</script>
I suppose this is link to the library website - http://hilios.github.io/jQuery.countdown/
You're passing string 'eventdate' to the countdown() method but it expects to be a valid date. So just remove the apostrophes and you'll get the eventdate variable's value:
$('#clock').countdown(eventdate, function(event) {
// ...
}

grails create js file and refer it from gsp

i did a simple js within web-app/js/time.js which is
/**
* Created by User on 28-01-2015.
*/
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
var myVar=setInterval(function(){myTimer()},1000);
and in my gsp i did this to refer this js function
<div id="loginHeader">
<g:javascript src="time.js" id="demo" />
</div>
but it is not showing on my gsp page, however if i put this script in the gsp page it works fine like
<div id="loginHeader">
<p id="demo"></p>
<script>
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
var myVar=setInterval(function(){myTimer()},1000);
</script>
</div>
i just want put this script into js file and call it from gsp page, so anyone can help me find out whats wrong with it?
I find out the answer see following codes
the js.file
function myTimer() {
var d = new Date();
document.getElementById("demo1").innerHTML = d.toLocaleTimeString();
}
var myVar=setInterval(function(){myTimer()},1000);
the gsp
<div id="loginHeader">
<g:javascript src="time.js" />
<p id="demo1"></p>
</div>

Showing Date in different format in javascript datepicker

I am new to JavaScript and I am trying to make a date-picker widget, I have the selected date in mm/dd/yy format,how can I get the date as "Thu(Day),25th July(Date,month) ,2013" kind of format and also how to set the input value to the current date.Here's my fiddle,
http://jsbin.com/idowik/3/
http://jsbin.com/idowik/3/edit
There are so much warnings , please bear with me and please open the output in new tab. Thank You,
Read the docs about the Date Object: http://www.w3schools.com/jsref/jsref_obj_date.asp.
Everything you need is described there.
Have a look at the following code:
<!DOCTYPE html>
<html>
<body>
<input id="dateInput" type="text"></input>
<button id="convertButton">Convert to string</button>
<a id="dateString"></a>
<script type="text/javascript">
var dateInput = document.getElementById("dateInput");
var button = document.getElementById("convertButton");
var dateString = document.getElementById("dateString");
var date;
button.onclick = function() {
var year = 2000+ parseInt(dateInput.value.split("/")[2]);
var month = dateInput.value.split("/")[0];
var day = dateInput.value.split("/")[1];
date = new Date(year, month, day);
dateString.innerHTML = date.toDateString();
}
</script>
</body>
</html>
This html page does exactly what you want.

Categories