24hr password array giving syntax errors - javascript

I made a script that (should) change the password daily using an array of passwords for each day, but I keep getting all sorts of errors.
<script>
</script>
<form>
<input type="text" placeholder="Username" id="text1" /><br>
<input type="password" placeholder="Password" id="text2" /><br>
<input type="button" class="button4" style="background-color:#9c9c9c" value="Login" onclick="javascript:validate()" />
</form>
<script type="text/javascript">
type = "text/javascript"
window.onload = function() {
chgDailyImg();
}
function chgDailyImg() {
var imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u#2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u#G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ#R";
var d = new Date(); /*** create a date object for use ***/
var i = d.getDay();
function validate() {
if (document.getElementById("text1").value == "student21" &&
document.getElementById("text2").value == imagearray[i]) {
console.log("RIGHT")
} else {
console.log("WRONG")
}
}
}
</script>
Mainly, it keeps saying that "validate" is not defined...
"<a class='gotoLine' href='#41:132'>41:132</a> Uncaught ReferenceError: validate is not defined"
OR
"<a class='gotoLine' href='#65:49'>65:49</a> Uncaught ReferenceError: imagearray is not defined"

Your function validate() has a scope within the function chgDailyImg(). Move it outside of the function fixes the problem.
<form>
<input type="text" placeholder="Username" id="text1" /><br>
<input type="password" placeholder="Password" id="text2" /><br>
<input type="button" class="button4" style="background-color:#9c9c9c" value="Login" onclick="javascript:validate()" />
</form>
<script type="text/javascript">
window.onload = function() {
chgDailyImg();
}
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u#2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u#G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ#R";
let i = 0;
function chgDailyImg() {
let d = new Date(); /*** create a date object for use ***/
i = d.getDay();
}
function validate() {
if (document.getElementById("text1").value == "student21" &&
document.getElementById("text2").value == imagearray[i]) {
console.log("RIGHT")
} else {
console.log("WRONG")
}
}
</script>
Update:
There are some problems with Scope of your variables and functions. Hope this reading will give you get a better idea.
Scope - MDN Web Docs
https://developer.mozilla.org/en-US/docs/Glossary/Scope

Related

how to Create a date input that only accepts a date that comes after today

I want to Create a date input that only accepts a date that comes after today, and if the user selected a date that comes before today you have to display an error message that describes that they can't do that.
what should i add to my code :
var myForm = document.getElementById('my_form');
myForm.addEventListener('submit', function(e){
var errors = "";
var ageInput = document.getElementById('age_input');
var nameInput = document.getElementById('name_input');
if (!ageInput.value || isNaN(ageInput.value))
{
ageInput.style.borderColor = 'red';
errors += 'age is invalid</br>';
} else {
ageInput.style.borderColor = 'inherit';
}
if(!nameInput.value) {
nameInput.style.borderColor = 'red';
errors += 'name is invalid\n';
} else {
nameInput.style.borderColor = 'inherit';
}
if (errors){
document.getElementById('errors').innerHTML = errors;
// to prevent the page from reloading
e.preventDefault();
}
});
<form id="my_form" action="submit.php">
<label>Age: </label>
<input type="text" id="age_input" />
<label>Name: </label>
<input type="text" id="name_input" />
<label>date: </label>
<input type="date" id="date_input" />
<button type="submit">submit</button>
<p id='errors'></p>
</form>
const datePicker = document.getElementById('date_input');
const selectedDate = new Date(datePicker.value);
const today = new Date();
today.setUTCHours(0,0,0,0);
if (isNaN(selectedDate) || selectedDate < today) {
errors += 'you can pick dates from the past</br>';
}

validation using js is not updating to span

I wrote this code to validate user input by js but it seems not entering the script I think the problem is that the "onkeyup" is not working with me
<script language="JavaScript">
var flag = false ;
function checkCat(value)
{
var validate = /^[a-z]{3,15}$/i ;
if( value.length ==0 )
{
re = '';
flag = false ;
}
else if(!validate.test(value))
{
flag = false ;
re = 'Invalid';
col = 'red' ;
}
else
{
flag = true ;
re = 'Valid';
col = 'green' ;
}
document.getElementById('print').style.color = col ;
document.getElementById('print').innerHTML = re ;
}
function checkForm ()
{
document.catForm.JSEnabled.value="TRUE";
return flag ;
}
</script>
the above code in the head part and the below in the body part
<form method = 'post' name = 'catForm' onsubmit="return checkForm();" >
<input type="text" name = 'cat' placeholder="Category name" onkeyup='checkCat(this.value)'> <span id='print'></span> <br/>
<input type='hidden' name='JSEnabled' value='FALSE' />
<input id="submit" type="submit" name = 'sb' value="Add A New Category" >
I even tested it with HTA extension and everything is ok !
<!DOCTYPE html>
<html>
<title>validation using js is not updating to span</title>
<head>
<script language="JavaScript">
var flag = false ;
function checkCat(value)
{
var validate = /^[a-z]{3,15}$/i ;
if( value.length ==0 )
{
re = '';
flag = false ;
}
else if(!validate.test(value))
{
flag = false ;
re = 'Invalid';
col = 'red' ;
}
else
{
flag = true ;
re = 'Valid';
col = 'green' ;
}
document.getElementById('print').style.color = col ;
document.getElementById('print').innerHTML = re ;
}
function checkForm ()
{
document.catForm.JSEnabled.value="TRUE";
return flag ;
}
</script>
</head>
<body>
<form method = 'post' name = 'catForm' onsubmit="return checkForm();" >
<input type="text" name = 'cat' placeholder="Category name" onkeyup='checkCat(this.value)'> <span id='print'></span> <br/>
<input type='hidden' name='JSEnabled' value='FALSE' />
<input id="submit" type="submit" name = 'sb' value="Add A New Category" >
</body>
</html>
Seems it is working as expected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form method='post' name='catForm' onsubmit="return checkForm();">
<input type="text" name='cat' placeholder="Category name" onkeyup='checkCat(this.value)'> <span id='print'></span> <br />
<input type='hidden' name='JSEnabled' value='FALSE' />
<input id="submit" type="submit" name='sb' value="Add A New Category">
</form>
<script>
var flag = false;
function checkCat(value) {
var validate = /^[a-z]{3,15}$/i;
if (value.length == 0) {
re = '';
flag = false;
}
else if (!validate.test(value)) {
flag = false;
re = 'Invalid';
col = 'red';
}
else {
flag = true;
re = 'Valid';
col = 'green';
}
document.getElementById('print').style.color = col;
document.getElementById('print').innerHTML = re;
}
function checkForm() {
document.catForm.JSEnabled.value = "TRUE";
return flag;
}
</script>
</body>
</html>
I tested it here:
`https://jsfiddle.net/v2b6sqcx/`
and it's working fine for me

Calculate the birth year in javascript

I tried to calculate the Birth year's of any age, but i could not do it like this.
And i did't see any error and the calculate function is work but it doesn't output any value.I think the error is in calculation function..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BirthDate</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-color: #bfc5c5">
<form style="margin-top:10px">
<input type="number" name="number" style="height:30px;width: 400px;padding-left: 10px" placeholder="type your age" id="number">
<input type="button" value="find year" id="button" style="height: 35px">
<p id="year">year</p>
</form>
<script type="text/javascript">
function calculate() {
var number = document.getElementById("number").value;
if (number == "" || number == 0) {
window.alert("Please type your correct age!");
return;
}
var date = new(Date()).getFullYear()
var birthyear = number - date;
document.getElementById("year").style.display = "block";
document.getElementById("year").innerHTML = "Your Birth Year is " + birthyear;
}
document.getElementById("year").style.display = "none";
document.getElementById("button").onclick = function {
calculate();
};
</script>
</body>
</html>
You're leaving out new from the Date constructor wrapped in parenthesis:
var date = (new Date()).getFullYear();
And missing a set of parenthesis for your onClick event handler:
document.getElementById("button").onclick = function() {...}
You've two error in your code, when you fix them all goes right :
Function missing the parentheses () at :
document.getElementById("button").onclick = function {
____________________________________________________^^
Should be :
document.getElementById("button").onclick = function() {
The definition of your date has extra parentheses () in :
var date = new(Date()).getFullYear();
______________^______^
Should be :
var date = new Date().getFullYear();
Working Snippet :
function calculate() {
var number = document.getElementById("number").value;
if (number == "" || number == 0) {
window.alert("Please type your correct age!");
return;
}
var date = new Date().getFullYear()
var birthyear = number - date;
document.getElementById("year").style.display = "block";
document.getElementById("year").innerHTML = "Your Birth Year is " + birthyear;
}
document.getElementById("year").style.display = "none";
document.getElementById("button").onclick = function() {
calculate();
};
body {
background-color: #bfc5c5;
}
<form style="margin-top:10px">
<input type="number" name="number" style="height:30px;width: 400px;padding-left: 10px" placeholder="type your age" id="number">
<input type="button" value="find year" id="button" style="height: 35px">
<p id="year">year</p>
</form>

HTML Form Onsubmit validation doesn't working for JS function

I am trying to raise an error for a form if the fields are not numeric however it isn't raising any error and directing to the page I defined as action.
I tried to raise error with a function just alerts but it again didn't raise any error and opened the other jsp.
Below is inside head tags
<script type="text/javascript">
function validation() {
var a = document.getElementByid("a");
var b = document.getElementByid("b");
var c = document.getElementByid("c");
var d = document.getElementByid("a").value;
var e = document.getElementByid("b").value;
var valid = true;
if (a.value.length <= 0 || b.value.length <= 0) {
alert("Lutfen alani bos birakmayiniz");
valid = false;
} else {
if (isNan(d)) || isNan(e)) {
alert("Rakam girmediniz. Rakam giriniz lütfen")
valid = false;
} else
return valid;
}
}
</script>
Following is inside body tag
<form onsubmit="return validation();" method="get" action="response.jsp">
</br>aaa <input type="text" id="a" value="0" />
</br>bbb <input type="text" id="b" value="0" />
</br>ccc <input type="text" id="c" />
<input type="submit" value="Submit" />
</form>
I am sure that it could work even if js function is in head and form is in body.
There are multiple errors in your script code,
change document.getElementByid to document.getElementById
change isNan to isNaN
and remove extra bracket at if(isNaN(d))
use the below one
<script type ="text/javascript">
function validation()
{
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("a").value;
var e = document.getElementById("b").value;
var valid =true;
if (a.value.length<=0 || b.value.length<=0)
{
alert("Lutfen alani bos birakmayiniz");
valid =false;
}
else
{
if (isNaN(d) || isNaN(e))
{
alert("Rakam girmediniz. Rakam giriniz lütfen")
valid =false;
}
}
return valid;
}
</script>

How can I load a value using html5 local storage

I want to get my input also as an outup in an form table. I copied the code beneath because I only want to know how to get my output.
I think that I have to change this
<input type="button" value="load" onclick="load_local();"/
so when I click on a button I get the value in a box like a form
<!DOCTYPE HTML>
<html>
<head>
<TITLE>HTML5 local storage tester (testbed)</TITLE>
</head>
<body>
<div id="output_area"
style="position:relative;width:100%;height:200px;overflow:auto;
border: dotted 1px #ff0000;">
</div>
<div>
<input id="local_storage_key" type="text" />
<input id="local_storage_value" type="text" />
</div>
<div>
<input type="button" value="load" onclick="load_local();"/>
<input type="button" value="store" onclick="store_local();"/>
</div>
<script id="this_page_js" type="text/javascript">
/* store some string data to local storage
This is using some text input elements on the page
for input.*/
function store_local(domid_prefix){
var keyinput = document.getElementById('local_storage_key').value;
var valinput = document.getElementById('local_storage_value').value;
try{
if(typeof(window.localStorage) != 'undefined'){
window.localStorage.setItem(keyinput,valinput);
}
else{
throw "window.localStorage, not defined";
}
}
catch(err){
output_str("store_local,error," + err);
}
}
/* load some string data from local storage
This is using some text input elements on the page
for the key name input and value output.*/
function load_local(domid_prefix){
var keyinput = document.getElementById('local_storage_key').value;
var valoutput = document.getElementById('local_storage_value');
try {
if(typeof(window.localStorage) != 'undefined') {
valoutput.value = window.localStorage.getItem(keyinput);
}
else {
throw "window.localStorage, not defined";
}
}
catch(err) {
output_str("store_local,error," + err);
}
}
/* function to print to the debug area */
function output_str(str){
var da = document.getElementById("output_area");
da.innerHTML += str + "<br/>";
da.scrollTop = da.scrollHeight;
}
</script>
</body>
</html>
thanks for answering.
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text" id="txt1" /><br/>
<input type="text" id="txt2" /><br/>
<input type="text" id="txt3" /><br/>
<input type="text" id="txt4" /><br/>
<input type="text" id="txt5" /><br/>
<input type="text" id="txt6" /><br/>
<input type="text" id="txt7" /><br/>
<input type="text" id="txt8" /><br/>
<input type="button" id="btn" value="Save" onclick="javascript: return save();"/>
<div id="output"></div>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript">
function save()
{
var arr =new Array();
var obj1 = parseInt(document.getElementById("txt1").value);
var obj2 = parseInt(document.getElementById("txt2").value);
var obj3 = parseInt(document.getElementById("txt3").value);
var obj4 = parseInt(document.getElementById("txt4").value);
var obj5 = parseInt(document.getElementById("txt5").value);
var obj6 = parseInt(document.getElementById("txt6").value);
var obj7 = parseInt(document.getElementById("txt7").value);
var obj8 = parseInt(document.getElementById("txt8").value);
arr.push(obj1);
arr.push(obj2);
arr.push(obj3);
arr.push(obj4);
arr.push(obj5);
arr.push(obj6);
arr.push(obj7);
arr.push(obj8);
var arrOrdered = _.sortBy(arr, function (item) {
return item; //you could implement your logic in here
});
var html = "";
_.each(arrOrdered, function(item){ html += item + "<br/>";});
document.getElementById('output').innerHTML = html;
}
</script>
</body>
</html>
function load()
{
var arr =new Array();
var obj1 = document.getElementById("txt1").value;
var obj2 = document.getElementById("txt2").value;
var obj3 = document.getElementById("txt3").value;
var obj4 = document.getElementById("txt4").value;
var obj5 = document.getElementById("txt5").value;
var obj6 = document.getElementById("txt6").value;
var obj7 = document.getElementById("txt7").value;
var obj8 = document.getElementById("txt8").value;
arr.push(obj1);
arr.push(obj2);
arr.push(obj3);
arr.push(obj4);
arr.push(obj5);
arr.push(obj6);
arr.push(obj7);
arr.push(obj8);
var arrOrdered = _.sortBy(arr, function (item) {
return item; //you could implement your logic in here
});
iterate.over(arrOrdered);
}

Categories