How does one make the current time appear in an alert box? I'm new to programming, so I'm completely lost. I'm coding in html5 or javascript. I've added most of my code here.
Here's my code:
<script>
function startTime(){
var today=Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
}
</script>
<div id="txt"></div>
<h1>What would you like it to say?</h1>
<p>Commmon Requests:</p>
<form action="">
<select name="requests" onchange ="checkIfOther();" id="dropDown1">
<option value="blank"> </option>
<option value="good morning sir">Good Morning Sir</option>
<option value="current time">Current Time</option>
<option value="other">Other</option>
</select>
</form>
</p>
<button onclick="mySubmit()" value>Submit</button>
<div id="other" style="display:none">
<br><br><label>Optional Request: </label><input type="text" id="otherText"/>
</div>
</body>
</html>
<script>
function checkIfOther(){
a=document.getElementById("dropDown1");
if(a.value == "other"){
document.getElementById("other").setAttribute("style","display:inline");
}
else{
document.getElementById("other").setAttribute("style","display:none");
}
}
</script>
<script type="text/javascript">
function mySubmit(){
var x=document.getElementById("dropDown1");
if(x.value == "other"){
alert("You have chosen: " + otherText.value);
}
else if(x.value == "current time"){
alert("The current time is: " + 'txt'.value); //what do I do here?
}
else{
alert("You have chosen: " + x.options[x.selectedIndex].text);
}
}
</script>
Am I doing something wrong?
First, your HTML is completely screwed. Validate it.
As for the code itself, startTime is broken. It needs new Date().
function startTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
return [ h, m, s ].join(':')
}
and to get it into an alert box you can just do:
alert(startTime());
If you want to put it in an element like <div id="txt"></div> you can do:
document.getElementById('txt').innerHTML = startTime();
You can do something like this.
...
else if(x.value == "current time"){
startTime();
alert("The current time is: " + document.getElementById('txt').innerHTML);
...
Make a function getTime that returns the current time string:
function getTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
return h+":"+m+":"+s;
}
Then use that:
…
else if(x.value == "current time"){
alert("The current time is: " + getTime());
}
…
If you still need the startTime function, you can use it there as well:
function startTime() {
document.getElementById('txt').innerHTML = getTime();
}
Related
I'm trying to make a simple alarm to practice
I think the issue is with the time input, yet I can not detect where is the problem
last thing I tried is to slice the innerHTML string match it with if :D
is problem with interval or the matching with if I don't know
I'm still beginner, thanks in advance
var dateId = document.getElementById("date")
var timeId = document.getElementById("time")
var date = new Date();
dateId.innerHTML = date;
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8);
}
setInterval(myTimer, 1000);
document.getElementById("Stime").addEventListener("input", SetTime);
function SetTime() {
var input = this.value;
console.log(input)
return input;
}
var inputValue = SetTime();
function matchTime() {
if (inputValue === timeId.innerHTML) {
console.log("Alarm")
}
}
setInterval(matchTime, 1000);
console.log(inputValue); //it gives me undefined
<div id="date"> </div>
<div id="time"> </div>
<br>
<br>
<br>
<input id="Stime" type="time" step="1" name="appt-time" value="13:30">
<div id="SLtime"> </div>
<div id="SPtime"> </div>
The first time you run SetTime() right here:
var inputValue = SetTime();
this.value inside SetTime() is undefined, since it is being called by the window. When it is later called as an event on the <input>, it gives you the value you expect. Have the <input> call the function instead and you will get its value.
var stime = document.getElementById("Stime");
var inputValue = SetTime.call(stime);
Here's the full snippet:
var dateId = document.getElementById("date")
var timeId = document.getElementById("time")
var date = new Date();
dateId.innerHTML = date;
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8);
}
setInterval(myTimer, 1000);
document.getElementById("Stime").addEventListener("input", SetTime);
function SetTime() {
var input = this.value;
console.log(input)
return input;
}
var stime = document.getElementById("Stime");
var inputValue = SetTime.call(stime);
function matchTime() {
if (inputValue === timeId.innerHTML) {
console.log("Alarm")
}
}
setInterval(matchTime, 1000);
console.log(inputValue); //it gives me undefined
<div id="date"> </div>
<div id="time"> </div>
<br>
<br>
<br>
<input id="Stime" type="time" step="1" name="appt-time" value="13:30">
<div id="SLtime"> </div>
<div id="SPtime"> </div>
Actually, when you change the alarm value it's only got the hours and minutes from it until you changed the seconds manually. And we are comparing the timer (which contains hours, minutes and seconds) and alarm value which contains only hours and minutes that's why Alarm is not print.
I just add ":00" for the seconds in the timer and compare its with alarm value.
var dateId = document.getElementById("date")
var timeId = document.getElementById("time")
var date = new Date();
var setTime; // used for set the alerm time value.
dateId.innerHTML = date;
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8);
}
setInterval(myTimer, 1000);
document.getElementById("Stime").addEventListener("input", function (evt) {
// Add :00 in value for seconds.
setTime = this.value.length == 5 ? (this.value+':00') :this.value; // set the setTime (alarm value)
});
function matchTime() {
// check the alarm value with our timer
if (setTime=== timeId.innerHTML) {
console.log("Alarm")
}
}
setInterval(matchTime, 1000);
console.log(setTime);
<div id="date"> </div>
<div id="time"> </div>
<br>
<br>
<br>
<input id="Stime" type="time" step="1" name="appt-time" value="13:30" min="00:00:00">
<div id="SLtime"> </div>
<div id="SPtime"> </div>
Hope this will help you.
I want to show clock using form element like HH MM SS but it is not working.
How can I do that?
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.getHours();
var y=d.getMinutes();
var z=d.getSeconds();
document.getElementById("demo").innerHTML = t+":"+y+":"+z;
}
</script>
<script>
function fun1() {
var d = new Date();
var t = d.getHours();
var y=d.getMinutes();
var z=d.getSeconds();
window.document.my.hh.value=t+;
window.document.my.mm.value=+y+;
window.document.my.ss.value=+z;
}
</script>
<form name="my">
HH
<input type="text" name="hh">
MM
<input type="text" name="mm">
SS
<input type="text" name="ss">
</form>
</body>
</html>
I expected output like
A script on this page starts this clock:
13:10:24
HH 13 MM 10 SS 24
but the actual output is
A script on this page starts this clock:
13:10:24
HH MM SS
You should change your code there:
window.document.my.hh.value=t;
window.document.my.mm.value=y;
window.document.my.ss.value=z;
This is a demo that I fixed: https://codepen.io/phuongnm153/pen/PrQvGq
Updated:
The question has a little change.
Then I add fun1(); into myTimer() function
I updated demo link
Put ID for each input tag, query each of them, and lastly fill the data you want.
For example:
<input type="text" name="hh" id="myH">
<script>
document.getElementById('myH').value('99999')
</script>
is this what you want?
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<form name="my">
HH
<input type="text" name="hh">
MM
<input type="text" name="mm">
SS
<input type="text" name="ss">
<input type="button" value="calc" onclick="fun1()">
</form>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.getHours();
var y=d.getMinutes();
var z=d.getSeconds();
document.getElementById("demo").innerHTML = t+":"+y+":"+z;
}
function fun1()
{
var d = new Date();
var t = d.getHours();
var y=d.getMinutes();
var z=d.getSeconds();
window.document.my.hh.value=+t;
window.document.my.mm.value=+y;
window.document.my.ss.value=+z;
}
fun1()
</script>
</body>
</html>
You could quite easily achieve your target by doing this: (btw it's good practice to store a reference to your elements because getting elements from the DOM can be quite expensive)
let clockHolder = document.getElementsByName("my")[0];
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
clockHolder.children[0].value = toDoubleDigits(d.getHours());
clockHolder.children[1].value = toDoubleDigits(d.getMinutes());
clockHolder.children[2].value = toDoubleDigits(d.getSeconds());
}
function toDoubleDigits(int) {
if (int > 9) return int;
return "0" + int;
}
The toDoubleDigits function makes sure you always have 03:07:20 instead of 3:7:20.
I'm trying to change the color of the input text whenever the$visa_expired is the same date as today. But right now, I get an error saying Invalid Date
Here is my code:
<script type="text/javascript">
function checkFilled() {
var today = new Date();
var expired = new Date("<?php echo $visa_expiry; ?> ");
var inputVal = document.getElementById("expiry");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "red";
window.alert(today);
}
else{
inputVal.style.backgroundColor = "yellow";
}
}
checkFilled();
</script>
Here is my HTML:
<input type="text" class="form-control" size="5" value="$visa_expiry" id="expiry">
This is similar to what I have done in the past
var inputElement = document.getElementById("expiry");
var inputDate = inputElement.value;
var expired = new Date();
var today = new Date();
expired.setUTCFullYear(inputDate.split("/")[2], inputDate.split("/")[0] - 1, inputDate.split("/")[1]);
if(today === expired) {
inputElement.style.backgroundColor = "red";
window.alert(today);
} else {
inputElement.style.backgroundColor = "yellow";
}
Also it looks like you need to change
<input type="text" class="form-control" size="5" value="$visa_expiry" id="expiry">
To
<input type="text" class="form-control" size="5" value="<?php echo $visa_expiry; ?>" id="expiry">
Just note that since you are using a input form box, its always possible that someone would enter something like 10-12-2016 instead of the 10/12/2016 format you may be expecting. Which would cause the above code to fail. You might want to consider finding a datepicker, or at the least change the
<input type="text">
to
<input type="date">
Then create some code to format the date to what you want.
References
How to change css property using javascript
Converting string to date in js
If 10/13/2016 is the value of $visa_expiry it should not give error.
check this link and run the fiddle it alert date.
http://phpfiddle.org/main/code/hpia-ub40
<script type="text/javascript">
function checkFilled() {
var today = new Date();
var expired = new Date("<?php echo $visa_expiry; ?> ");
var inputVal = document.getElementById("expiry");
if (today >= expired) {
inputVal.style.backgroundColor = "red";
}
else{
inputVal.style.backgroundColor = "yellow";
}
}
checkFilled();
</script>
You are trying to display an Date Object in alert, which expects a string input. You should use getDate() instead.
try this:
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
today = day + '/' + month + '/' + year
The problem is that when I put the correct hour and the incorrect minutes it always returns me: "bad" and "very nice". I don't know what is going wrong so could you help me please.
I have the following html and JS:
<!DOCTYPE html>
<html>
<body>
<script language="Javascript">
var d = new Date();
var h = d.getHours();
var h1 = document.forms["INICI"].starthour.value;
var m = d.getMinutes();
var m1 = document.forms["INICI"].startminut.value;
function myHour() {
if ( h==h1 ) {
document.write("nice"+"<br>");
} else {
document.write("bad"+"<br>");
}
}
function myMinut() {
if ( m1==m ){
document.write("very nice"+"<br>");
} else {
document.write("very bad"+"<br>")
}
}
</script>
<form name="INICI">
start hour: <input name="starhour"/> <br />
<br>
start minut: <input name="startminut"/> <br />
<input id="insert1"
onclick="myHour(); myMinut();"
type="submit"
value="Click" />
</form>
</body>
</html>
(I'm new here.... sorry if I did this post very bad)
I had improved your code. here is a working version of it.
<!DOCTYPE html>
<html>
<body>
<form name="INICI">
start hour:
<input name="starthour" />
<br />
<br>
start minut:
<input name="startminut" />
<br />
<input id="insert1" onclick="EvaluateResults()" type="submit" value="Click" />
</form>
<script language="Javascript">
function EvaluateResults() {
var d = new Date();
var h = d.getHours();
var h1 = document.forms["INICI"].starthour.value;
var m = d.getMinutes();
var m1 = document.forms["INICI"].startminut.value;
console.log(h + ' ' + h1);
if (h == h1) {
document.write("nice" + "<br>");
}
else {
document.write("bad" + "<br>");
}
if (m1 == m) {
document.write("very nice" + "<br>");
}
else {
document.write("very bad" + "<br>")
}
}
</script>
</body>
</html>
What went wrong with your code is that you are taking the time when the JavaScript file loaded and executed and not when the button is pressed. What i did to solve your problem is I just created a method and transferred the code that acquires the time.
You are setting your variables when the page loads so they will always be the same.
If you put them inside the functions this could be solved
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
function myHour()
{
var h1 = document.forms["INICI"].starthour.value;
if (h==h1){
document.write("nice"+"<br>");
}
else{
document.write("bad"+"<br>");
}
}
function myMinut()
{
var m1 = document.forms["INICI"].startminut.value;
if (m1==m){
document.write("very nice"+"<br>");
}
else{
document.write("very bad"+"<br>")
}
}
You have a typo:
<input name="starhour"/>
Needed
<input name="starthour"/>
Also put your script tag to the end of the body
I want a button to be visible on given date and month with javascript.
Javascript:
<script type="text/javascript">
function today()
{
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
if(month==1 && day==1)
{
document.getElementById('xx').style.visibility='visible';
}
else
{
document.getElementById('xx').style.visibility='hidden';
}
}
</script>
HTML:
<input type="image" SRC="/Patankar/PNH/images/click_anim.gif" id="xx" id="return1" onClick='today();' ALT="Submit Form" style="visibility:hidden;display:none" >
I tried this code but nothing happened. Please tell me my mistake.
You have two id tags on one element:
id="xx" id="return1"
Remove one of them. From your code example, you should remove id="return1".