Not sure why this JavaScript inst placing the time within the blank text field and updating the time every second. I am trying to get the JavaScript to have a label at the top that says Current Time then a text field that has the current time that is updated every second.
<html>
<head>
<title>Timer</title>
<script language="javascript" type="text/javascript">
var dateform
speed=2000
tid=0;
function dodate()
{
f.date.value=new Date();
tid=window.setTimeout("dodate()",speed);
}
function start(x)
{
f=x
tid=window.setTimeout("dodate()",speed);
}
function cleartid()
{
window.clearTimeout(tid);
}
</script>
</head>
<body onload="start(document.dateform) ;">
<center>
The Digital Clock
<FORM name="dateform" action="post">
<input type="text" name="date" size=30>
</FORM>
</center>
</body>
</html>
The method you need to use is setInterval and make little changes:
var dateform
speed=1000
tid=0;
function dodate()
{
f.date.value=new Date();
}
function start(x)
{
f=x
tid=window.setInterval("dodate()",speed);
}
function cleartid()
{
window.clearTimeout(tid);
}
Related
So far I have been able to come up with something like this. And i have been able to send something to an array, but in the display, thats what i have not been able to achieve so far.
Hence i am asking, How do i display it?
<!doctype html>
<html>
<head>
<script type=text/javascript>
var array = [];
function add_element_to_array() {
array.push(document.getElementById("institution_name").value);
array.push(document.getElementById("degree_obtained").value);
array.push(document.getElementById("honors_acheieved").value);
document.getElementById("institution_name").value = "";
document.getElementById("degree_obtained").value = "";
document.getElementById("honors_acheieved").value = "";
}
function display_array()
{
// Display array
}
</script>
</head>
<title>Test Javascript</title>
<h1>Test JS</h1>
<body>
<form name="xform" id="xform" method="post" action="samris.php" /> Institution Name:
<input type="text" name="institution_name" id="institution_name" /> </br>
Degree Obtained:
<input type="text" name="degree_obtained" id="degree_obtained" />
</br>
Honors Achieved:
<input type="text" name="honors_acheieved" id="honors_acheieved" />
</br>
</p>
<input type="button" name="Add" id="add" value="add" onclick="add_element_to_array()" />
</form>
<div onload= display_array()>
</div>
</body>
</html>
To display array:
function display_array(){
var display = array.join('<br>');
this.innerHTML = display; // only works if you call it inline (except onload).
/* OR */
// works everywhere when you add an id to the div except onload (see explanation below).
document.getElementById('display').innerHTML = display;
}
/* ... in the HTML ... */
<div id="display"></div>
However you will still not able to display it in the div because of the onload=display_array().
When the div is being loaded, display_array() will be called. However when it is being loaded, array is still empty because nothing has been added to it yet by onclick=add_element_to_array().
To do that, you can call display_array() from within add_element_to_array() like so:
function add_element_to_array(){
/*
your code
*/
display_array();
}
Alternatively, you need to remove the onclick and replace by addEventListener in your <script>. However, you will need to move your <script> tag to the bottom of your <body> tag or otherwise implement a function similar to jQuery's ready().
I'm trying to get time input in local storage but couldn't succeed it so far.
html part of the time input field of the form:
<label for="time"><p>Start</p></label>
<input type="time" id="time" name="time" min="09:00" max="17:00"/>
javascript:
function getTime(){
globalTime = document.getElementById("time").value;
localStorage.setItem("timeData", globalTime);
}
function inputTime(){
var newTime = localStorage.getItem("timeData");
alert(newTime);
}
When I call the inputTime function, I get empty alert box, which means I can't get the time input.
I'd be grateful if you could tell me what is the reason and how can I fix it.
Use .addEventListener() to attach input event to #time element. Attach click event to <button> elements to set and get value of localStorage
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="time">
<p>Start</p>
</label>
<input type="time" id="time" name="time" min="09:00" max="17:00" value=""/>
<br />
<br />
<button id="setTime">
Set time
</button>
<button id="test">
Get time
</button>
<script>
document.getElementById('time').addEventListener('input', getTime);
document.getElementById('test').addEventListener('click', inputTime);
document.getElementById('setTime').addEventListener('click', setTime)
var globalTime;
function getTime() {
globalTime = document.getElementById("time").value;
console.log(globalTime)
}
function setTime() {
localStorage.setItem("timeData", globalTime);
}
function inputTime() {
var newTime = localStorage.getItem("timeData");
alert(newTime);
}
</script>
</body>
</html>
plnkr http://plnkr.co/edit/AzbVoqkGQwLXGlRV9CQd?p=preview
I am a beginner in Angular JS. While creating a sample application I have encountered the below problem of a text box not getting set once the value in its cleared using JavaScript.Below is my code:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function () {
this.showName = function () {
this.user = { name: "John" };
}
this.clear = function () {
document.getElementById("name").value = "";
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl as ctrl" class="container">
<input type="button" ng-click="ctrl.showName()" value="Show Name"/>
<input type="text" id="name" ng-model="ctrl.user.name" />
<input type="button" value="Clear" ng-click="ctrl.clear()" />
</div>
</body>
Her the first time I click on the Show name button I am getting the name in the text box.But if I clear the text box by clicking the Clear button and then click on the show button again the name is not getting filled in the text box.
Can anyone please tell me why this is happening and anyways to fix this?
Here is my code in plunkr - http://plnkr.co/edit/MXlH2o?p=preview
In your clear function do below code to clear value.
this.user = { name: "" };
Clear the name like this,
this.clear = function () {
this.user.name = "";
}
you don't need a clear() method in the controller, just take advantage of the double binding in angular, set the username to an empty string when you click on the button and the view will be updated consequently.
<input type="button" value="Clear" ng-click="ctrl.user.name = ''" />
change clear function to this code
this.clear = function () {
this.user.name="";
}
I have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?
what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.
Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.
Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.
I want to extract a value from my hidden inputbox, by using javascript, but sometimes i am getting a "undefined" error and sometimes no output.
when i did
alert(document.getElementById('hhh').value);
from inside a printIt() function i get the output. but i think somehow it is not going in to "var a", and also
var a =22;
works if i remove the
var a =document.getElementById('hhh').value;
in below code.
<script type="text/javascript">
var a =document.getElementById('hhh').value;
function startTime()
{
document.getElementById('txt').innerHTML=a;
a=a-1;
t=setTimeout('startTime()',600);
}
</script>
<body onLoad="startTime()">
<form name="form1" id="form11" method="post" action="">
<input type="hidden" id="hhh" name="time" value="11" />
</form>
<div id="txt"></div>
</body>
Any help would be appreciated.
Thanks.
You call document.getElementById('hhh') before hhh exists. Move it into a function you call onload.
var a =document.getElementById('hhh').value;
This runs before the document is loaded so the underlying element may not exist in the DOM.
You call document.getElementById('hhh') before hhh exists. Move it into a function you call onload.
var a;
function setup() {
a = document.getElementById('hhh').value;
startTime();
}
function startTime() {
document.getElementById('txt').innerHTML = a--;
setInterval(startTime, 600);
}
and run setup(); in your onload.
Leave it as an "type=input" and add the css property: display: none;
<input type="input" id="hhh" name="time" value="11" style="display: none;" />