Below code works fine on http://jsfiddle.net/saQTw/2/
for some reason it doesnt work on my local machine, i am not sure where i am making the mistake. Need an expert eye to look what i am doing wrong in this code.
Code which i got from the stackoverflow is support to populate the select list with dates
but i cant make it work on my local machine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<link href="css.css" rel="stylesheet" type="text/css" />
<script>
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
date.setDate(date.getDate() + 1);
}
$('#ddDate').append(selectElement);
</script>
</head>
<body>
<div id="ddDate"> </div>
</body>
</html>
I tried jQuery version 1.6 also it does not work
Solution for the above problem:
<script>
$(function(){
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
date.setDate(date.getDate() + 1);
}
$('#ddDate').append(selectElement);
});
</script>
try wrapping the jquery in a document.ready()
<script>
jQuery(document).ready(function) {
You are accessing the #ddDate element before it exists. So either move the javascript part beneath the body OR wrap the code into $(document).ready(function() {...})
In JSFiddle you are using the onload event to run pad(n). You need to do the same here
Modify the <body> tag to <body onload="pad(2)">
Related
i am trying to make a javascript stopwatch here and i want to add time to div.circle and i don't know whats wrong in this code please help me!! thanks
<-- this is html code --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h1>Stopwatch</h1>
<div class="circle"></div>
<div class="buttons">
<button>Start</button>
<button>Stop</button>
<button>Reset</button>
</div>
</div>
</body>
<script>
<-- this is js code -->
let min = 0;
let sec = 0;
let mil = 0;
let time = document.getElementsByClassName("circle");
time = min + " : " + sec + " : " + mil ;
time.innerHTML = time;
console.log (time);
</script>
</html>
let time = document.getElementsByClassName("circle");
time = min + " : " + sec + " : " + mil;
time.innerHTML = time;
Those lines actually set the time variable as an element, but then break it and put it inside a string.
Should be like that:
const time = document.getElementsByClassName("circle");
time.innerHTML = min + " : " + sec + " : " + mil;
Your code has some very fundamental pieces missing. I have changed it a bit to show something on button click but it will require way more efforts than that. I will highly recommend you to go through some tutorial in HTML, CSS, JS for a day or two.
const button = document.getElementsByTagName("button")[0];
button.onclick=() => {
let min = 0;
let sec = 0;
let mil = 0;
let time = document.getElementsByClassName("circle")[0];
let timeString = min + " : " + sec + " : " + mil ;
time.innerHTML = timeString;
console.log(timeString);
}
<div class="box">
<h1>Stopwatch</h1>
<div class="circle"></div>
<div class="buttons">
<button>Start</button>
<button>Stop</button>
<button>Reset</button>
</div>
</div>
so I have written some code that will allow someone to enter their order date and will return expected printing and delivery dates.
Only issue is its splitting out MM/DD/YYYY. Any help to get this working is much appreciated.
<head>
<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>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script>
function myfunction() {
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getFullYear() + '-' + ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) + '-' + future.getDate();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future.getFullYear() + '-' + ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) + '-' + future2.getDate();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
I'm edited in date format on your code: var finalDate and var finalDate2. Because in the code make a format date in your jquery.
In code below will changed format date to DD/MM/YYYY
So I changed to this code:
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
Then will get output like this
<head>
<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>
<script>
$( function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
<script>
function myfunction(){
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
UPDATE
For Changed Input Format to DD/MM/YYYY
Changed
$( "#datepicker" ).datepicker();
To
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
This question already has answers here:
Taking screenshot using javascript for chrome extensions
(5 answers)
How to access the webpage DOM/HTML from an extension popup or background script?
(2 answers)
Closed 2 years ago.
I have one issue, finally solve with browser tab screenshot capturing. But how save captured images in certain folder path, only with vanilla JS without back-end. For now, by default saves in download folder
const url = 'http://local.requestmapper.com/api/user/';
document.getElementById('logout').addEventListener("click", logout);
document.getElementById('takess').addEventListener("click", takess);
function takess() {
chrome.tabs.captureVisibleTab(null, {}, function (canvas) {
var filename = getFormattedTime();
const a = document.createElement("a");
document.body.appendChild(a);
a.href = canvas;
a.download = filename + ".jpg";
a.click();
document.body.removeChild(a);
});
}
function getFormattedTime() {
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;
var d = today.getDate();
var h = today.getHours();
var mi = today.getMinutes();
return y + "_" + m + d + "_" + h + mi;
}
user.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<script src="js/bootstrap.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/jspdf.min.js"></script>
<head>
<meta charset="UTF-8">
<title>User</title>
</head>
<body>
<div class="container">
<button type="submit" class="btn btn-danger" id="logout">Log Out</button>
<button type="submit" class="btn btn-info" id="takess">Take screenshot</button>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
</html>
I have text filed for number of weeks and i have date-picker to choose start date.
How can i have end date based on my selected number of weeks?
What if i have text field for number of months and getting end date based on selecting start date?
i tried this but it's not working:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#start_date').bind('change', function() {
var days = $('#week_number').val() * 7;
var endDate = new Date($(this).val());
endDate.setDate(endDate.getDate() + days);
$('#end_week_return').val( (endDate.getMonth() + 1)+ '/' + endDate.getDate() + '/' + endDate.getFullYear() );
});
});
</script>
Above code is seems to be fine. The problem will be in some other part of the page, may be in your header js files, or in html elements. I have created a sample html file please try this and it may help you.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#start_date" ).datepicker();
$('#start_date').bind('change', function() {
var days = $('#week_number').val() * 7;
var endDate = new Date($(this).val());
endDate.setDate(endDate.getDate() + days);
$('#end_week_return').val( (endDate.getMonth() + 1)+ '/' + endDate.getDate() + '/' + endDate.getFullYear() );
});
});
</script>
</head>
<body>
No of weeks: <input type="text" id="week_number" />
Start date: <input type="text" id="start_date" />
End date:<input type="text" id="end_week_return" />
</body>
I am taking my first JavaScript class. The first two exercises I did worked great. This one however is not. Nothing all all shows up in the browser. It is just a white page. Any suggestions would be greatly appreciated.
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var degFahren = Number(prompt("Enter the degrees Fahrenheit",32));
var degCent;
degCent = 5/9 * (degFahren - 32));
document.write(degFahren + "\xB0 Fahrenheit is " + degCent + "\xB0 centigrade<br />";
if (degCet < 0) { document.write("That's below the freezing point of water");}
if (degCent == 100) { document.write("That's the boiling point of water"); }
</script>
</body>
</html>
This code should work. These are easy to spot problems, just open up your javascript console (F12) and you'll see you have an extra ) on line 8, and a missing one line 10. There was also a typo on degCent.
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var degFahren = Number(prompt("Enter the degrees Fahrenheit",32));
var degCent;
degCent = 5/9 * (degFahren - 32);
document.write(degFahren + "\xB0 Fahrenheit is " + degCent + "\xB0 centigrade<br />");
if (degCent < 0) { document.write("That's below the freezing point of water");}
if (degCent == 100) { document.write("That's the boiling point of water"); }
</script>
</body>
</html>