I'm trying to use Countdown.js. I found this guide and copied the code and pasted it to try to tweak and understand the code, but when i run it in my web i cant make it work, in the console i get "Uncaught ReferenceError: countdown is not defined(anonymous function) # countdown..html:46".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="countdown.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://monopolo11.ninja/tests/css/main.css">
<link rel="stylesheet" type="text/css" href="flip/flipclock.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>
<body>
<div id="countdown-holder"></div>
<script>
var clock = document.getElementById("countdown-holder")
, targetDate = new Date(2050, 00, 01); // Jan 1, 2050;
clock.innerHTML = countdown(targetDate).toString();
setInterval(function(){
clock.innerHTML = countdown(targetDate).toString();
}, 1000);
</script>
<br/>
<br/>
You will be logged out in <span id="logout-timer"></span>
<script>
var timer = document.getElementById("logout-timer")
, now = new Date()
, deadline = new Date(now.getFullYear, now.getMonth, now.getDate, now.getHours, now.getMinutes + 15);
timer.innerHTML = countdown(deadline).toString();
setInterval(function(){
timer.innerHTML = countdown(deadline ).toString();
}, 1000);
</script>
</body>
</html>
The sample in guide use countdown is actually should be Countdown.
// Declare the countdown object
// Constructor. target_date and current_date are Javascript Date objects
function Countdown(target_date, current_date) {
this.target_date = target_date;
this.current_date = current_date;
}
Related
I'm new to JavaScript and I've been trying to get the title text to switch between different texts for a day now. I've gathered some code snippets and put them together, so I'm not quite sure what's going on.
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function switchingText(); {
document.getElementByID("title").innerHTML = "Text";
sleep(2000);
document.getElementByID("title").innerHTML = "Text2";
sleep(2000);
switchingText();
}
I would appreciate any help greatly.
This is a sample solution for your dilemma:
const title= document.getElementById("title");
const switchHeading = () => {
if (title.innerHTML== "Text"){
title.innerHTML = "Text2";
}else{
title.innerHTML = "Text";
}
}
setInterval(() => {
switchHeading()
}, 2000);
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1 id="title">Text</h1>
<script src="./script.js" async defer></script>
</body>
</html></html>
Helpful links:
W3Schools Set Interval
All you need to do is get the title element like you did but instead of changing the InnerHTML, change the value, like so:
document.getElementByID('title').value="Text"
Hope you found what you were looking for.
Instead of doing
document.getElementByID("title").innerHTML = "Text";
in the switching text function,
you need to do
document.title = 'your text'
I'm learning web development and I'm trying to do the simplest things in javascript to learn how it works. I have this problem, the h1 text is not changing on the page but when I open the console it prints the changed value each time , here's the code (Hint, the sleep() function is from the internet and I don't know anything yet about it but it works):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<script>
let counter = 0;
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function change(){
while(true)
{
document.querySelector("#show").innerText = counter;
counter++
console.log(document.querySelector("#show").innerText);
sleep(1000);
}
}
</script>
</head>
<body>
<button onclick="change()" id="button" >COUNT</button>
<h1 id="show">0</h1>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<script>
function change() {
let counter = 0;
setInterval(() => {
document.querySelector("#show").innerText = counter;
counter++;
}, 1000);
}
</script>
</head>
<body>
<button onclick="change()" id="button" >COUNT</button>
<h1 id="show">0</h1>
</body>
</html>
try changing your change function using setInterval. you can find how to use set interval using https://www.w3schools.com/jsref/met_win_setinterval.asp
So. This is the starting code for a javascript parser that I'm working on. What's wrong is this: It crashes any time that let is in there. So if I try to type, it just freezes the page so I have to reload. The effect only takes place after I start to type, since it's an onchange event. Can someone helps me? All helps are appreciated!
document.write('not working');
let jsAreas = document.getElementsByClassName('jsArea')
document.write('Not working')
String.prototype.splice = function(idx, rem, str) {
return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
let commenter = document.getElementById('commenter')
for(let i = 0; i < jsAreas.length; i++){
let jsArea = jsAreas[i]
jsArea.addEventListener('keyup', e => {
commenter.textContent = ''
let varRegex = /let/g
var b = document.getElementsByTagName('b');
while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}
while(varRegex.test(jsArea.innerHTML)){
commenter.textContent += varRegex.lastIndex
jsArea.innerHTML = jsArea.innerHTML.splice(varRegex.lastIndex - 3, 0, '<b>')
jsArea.innerHTML = jsArea.innerHTML.splice(varRegex.lastIndex + 3, 0, '</b>')
}
commenter.textContent += `Comment: This is the found: ${jsArea.innerHTML.match(varRegex)}. This is the other thing: ${jsArea.innerHTML}. The last index is: ${varRegex.lastIndex} `
})
}
<!-- This is a static file -->
<!-- served from your routes in server.js -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Glitch!</title>
<meta name="description" content="A cool thing made with Glitch">
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/client.js" defer></script>
</head>
<body>
<div class="jsArea" contenteditable="true">let=</div>
<p id='commenter'>
Comments:
</p>
<footer>
Made with Glitch!
</footer>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<script src="https://rare-leek.glitch.me/client.js">
</script>
</body>
</html>
I am using a jquery datepicker to display available booking dates for a reservation form.
The datepicker has been working fine, but now it now longer displays. Instead I get an error {Uncaught TypeError: $(...).datepicker is not a function}.
The code is contained in the page header, and as far as I'm aware has been working fine until it just randomly wasn't anymore. I noticed the error just before as I was blocking a date on the calendar and it wouldn't appear when I went to test it.
The site is a Weebly site, and the form I'm using collects the entries for me to review. At 10:18pm last night (NZ Time) an entry was submitted with the correct date format, however the next booking (4:50pm NZ Time) was entered as "may 6th" which indicates it was typed by the user.
I am the only one with access to the source code for the site and have not made any changes in the last 2 months (Since I blocked some dates before Easter). I honestly have no idea why it would've stopped working.
CODE
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Javascript -->
<script>
var dateToday = new Date();
var array = ["05/05/2017","06/05/2017"]
$( function() {$( "#input-806171099542486857" ).datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
var day = date.getDay();
return [(day != 1 & day != 2) & array.indexOf(string) == -1 ];
}, minDate: dateToday
});
});
</script>
</head>
Please check this. Your code is not working because of its blocking Http request over Https. I have modified it and it's working properly now.
var dateToday = new Date();
var array = ["05/05/2017","06/05/2017"]
$( function() {$( "#input" ).datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
var day = date.getDay();
return [(day != 1 & day != 2) & array.indexOf(string) == -1 ];
}, minDate: dateToday
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="input" type="text" />
</body>
</html>
Here you have one working for multiple dates
$(document).ready(function (){
var array_names = ["John", "Joseph", "Luis"];
var dbDate;
var date2;
var num = array_names.length;
var array_dates =["1974-05-30", "1978-11-12", "1980-12-11"];
for(var i = 0; i<num; i++){
$("#share").append('<form id = "form_'+array_names[i]+'">');
$("#form_"+array_names[i]).append('<input type="text" placeholder="Name" name="routename" value = "'+array_names[i]+'" id="name_'+array_names[i]+'">');
$("#form_"+array_names[i]).append('<input type="date" placeholder="Date of birth" name="date_birth" value = "'+array_dates[i]+'" id="datepiker_'+array_names[i]+'" class = "datepiker">');
dbDate = array_dates[i];
date2 = new Date(dbDate);
$("#datepiker_"+array_names[i]).datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker('setDate', date2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id = "share">
</div>
Here you have one working for a fixed number of dates
$(document).ready(function (){
var dbDate;
var date2;
var array_dates =["1974-05-30", "1978-11-12", "1980-12-11"];
var num = array_dates.length;
for(var i = 0; i<num; i++){
dbDate = array_dates[i];
date2 = new Date(dbDate);
$("#datepiker_"+i).datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker('setDate', date2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type ="datepicker" id = "datepiker_0" value = "" class = "datepicker">
<input type ="datepicker" id = "datepiker_1" value = "" class = "datepicker">
<input type ="datepicker" id = "datepiker_2" value = "" class = "datepicker">
I have an input field that I would like to refresh every 2 seconds or so. However,I can't seem to get the 'setInterval' right because it is not updating my ID. Should I not be using the
ID to declare the refresh? Any help will be most appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
<script src="Scripts/Global.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css">
</head>
<body>
Time: <input type="time" id="theTime">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("theTime").innerHTML = t;
}
</script>
<script type="text/javascript">
$(document).ready( function() {
var now = new Date();
//now2 prevents the milliseconds from showing up in the input
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()-8, now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
});
</script>
</body>
</html>
You're setting the innerHTML of myTimer, where you should really be setting the valueAsDate, like in your $(document).ready function.
Here's how myTimer should look:
function myTimer() {
var now = new Date();
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()-8, now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
}
and then you can call myTimer() from within your $(document).ready:
$(document).ready( function() {
myTimer();
});
you are trying to set the innerHTML of an input field. use $('#theTime').val() instead!