I am using an input and want to covert it into a string/var to print it out in an alert after i click on a button.
I need the input of "Forename:" to add into the button "send" with "onlcick".
The alert is just a debuger. Instead of alert i want to use a function. Using onclick="printPDF(foreName+' '' ' + da + '.' + mo + '.' + ye + '_' + h + ':' + m + ':' + s + '.pdf');
function startTime() {
var today = new Date();
var da = today.getDate();
var mo = today.getMonth() + 1;
var ye = today.getFullYear();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
<p>
<label>Forename:</label>
<input class="w3-input w3-white" id="some1" type="text" name="some1" value="asd" maxLength="200">
</p>
<button id="snbtn1" type="submit" class="w3-btn w3-green" onclick="alert(' ' + da + '.' + mo + '.' + ye + '_' + h + ':' + m + ':' + s + '.pdf');">send</button>
<script>
function startTime() {
var today = new Date();
var da = today.getDate();
var mo = today.getMonth()+1;
var ye = today.getFullYear();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var foreName = document.getElementById('some1').value;
alert(foreName+' ' + da + '.' + mo + '.' + ye + '_' + h + ':' + m + ':' + s + '.pdf');
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<p>
<label>Forename:</label>
<input class="w3-input w3-white" id="some1" type="text" name="some1" value="asd" maxLength="200">
</p>
<button id="snbtn1" type="submit" class="w3-btn w3-green" onclick="startTime();">send</button>
You should put your onclick code into a function in your javascript code, by getting the button element and adding an event listener to it. In the same way you get the button in your javascript code you can get the input and it's value:
var today = new Date();
var da = today.getDate();
var mo = today.getMonth()+1;
var ye = today.getFullYear();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
//m = checkTime(m);
//s = checkTime(s);
document.getElementById("snbtn1").addEventListener("click", function() { // Get the button and add an onclick event listener to it
alert(' ' + da + '.' + mo + '.' + ye + '_' + h + ':' + m + ':' + s + '.pdf');
alert(document.getElementById("some1").value); // Get the input by it's id and alert the value
});
<p>
<label>Forename:</label>
<input class="w3-input w3-white" id="some1" type="text" name="some1" value="asd" maxLength="200">
</p>
<button id="snbtn1" type="submit" class="w3-btn w3-green">send</button>
https://developer.mozilla.org/he/docs/Web/API/Document/getElementById
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Related
So the code/script is below. I want it to update without having to refresh the page. I tried putting it in a loop but the page just never loaded. Can anyone help?
Thanks
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0" + dt.getDate()).slice(-2)) + "." + (("0" + (dt.getMonth() + 1)).slice(-2)) + "." + (dt.getFullYear()) + " " + (("0" + dt.getHours()).slice(-2)) + ":" + (("0" + dt.getMinutes()).slice(-2)) + ":" + (("0" + dt.getSeconds()).slice(-2)) + ":" + (("0" + dt.getMilliseconds()).slice(-2));
setinterval(timer, 1000);
Modify the code like this
setInterval(function(){
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+(dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2)) +":"+ (("0"+dt.getSeconds()).slice(-2)) +":"+ (("0"+dt.getMilliseconds()).slice(-2));
}, 1);
<div id="datetime">
</div>
This will also work
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
ref: https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
function dateTimeClock() {
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<p id="today"></p>
<p id="day"></p>
<p id="month"></p>
<p id="year"></p>
<p id="date"></p>
<p id="time"></p>
<p id="dateTime"></p>
Can someone please tell why my setInterval is not kicking in ?
I expect my data to refresh every second.
the var for date is defined outside of the interval so it doesn't update. to fix this you'll have to include it in your dateTimeClock function
function dateTimeClock() {
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
Your time variables are only called once, so their value doesn't change.
Try calling the time variables from within your dateTimeClock function:
function dateTimeClock() {
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
var d = new Date();
var h = d.getHour();
var m = d.getMinute();
var s = d.getSecond();
if (h == 12) {
alert(h + ":" + m + ":" + s + " PM");
} else {
alert(h + ":" + m + ":" + s + " AM");
}
What should i do?
Should i change the d.getMinute() to d.getMin()?
Thank you all
The methods are all supposed to be pluralized:
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(h == 12) {
alert(h+":"+m+":"+s+" PM");
} else {
alert(h+":"+m+":"+s+" AM");
}
For more more information about the Date methods: W3School
I have a script that for every click of the button takes the time, applies #gmail.com to the end and appends it to a defined div tag.
where the problem lies is that every time i hit the button, the first line changes to the current time, an additional line is appended each time with the correct details and they don't update it is just the first line.
can someone suggest a way to stop the first line from updating each time?
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = document.getElementById("demo").innerHTML = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$(document).ready(function() {
$("button").click(function() {
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
});
});
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
What I expect to happen each time i press the button is for it to append the following:
2591695115#gmail.com
2591695116#gmail.com
2591695117#gmail.com
2591695118#gmail.com
...etc
You are calling Time() onclick in your HTML. You do not need to say $("button").click again in your jquery.
Also, you do not need document.getElementById("demo").innerHTML when assiging the string to var j.
See the following code:
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
You just need to append the result from Time function.
$(document).ready(function () {
$("button").click(function () {
$("#demo").append(Time());
});
});
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
return j;
}
This should work. The problem was the structure of your function. I took the button click outside of the Time() function and also changed var j to only declare the time instead of also already adding it to the HTML.
Also, by declaring var j after your if statements the date now displays correctly.
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$("#demo").append(j);
}
$("button").click(function() {
Time();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button>Generate</button>
<div id="demo"></div>
Example which is not working:
<div id="clockDisplay"></div>
<script type="text/javascript" language="javascript">
function renderTime() {
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = 'Local time:\n' + h + ":" + m + ":" + s;
myClock.innerText = 'Local time:\n'+ h + ":" + m + ":" + s;
}
renderTime();
</script>..
The ---> myClock.innerText = 'Local time:\n'+ h + ":" + m + ":" + s; <---
separates Local time from the digits in Chrome.
However ---> myClock.textContent = 'Local time:\n' + h + ":" + m + ":" + s; <---
is supposed to do the same just in Firefox but it doesn't work.
I have tried with \n\r, \r\n, /\n/ and /\r/ Nothing worked for me..
Use <br> as line break. HTML collapses whitespace:
myClock.innerHTML = 'Local time:<br>' + h + ":" + m + ":" + s;