JQuery not executing defined function in .blur() - javascript

I'm very new to JQuery and Javascript in general, and I'm working on a project for school. While I can get everything to work without defining any functions, I want to reduce redundant code.
Here's a bit of what I'm trying to do:
function firstNameChanged() {
var x = document.getElementById("firstName").value;
if (x == null || x == "") {
$("#firstNameError").html(" First name can't be blank!");
}
else {
$("#firstNameError").html("");
}
}
$(document).ready(function(){
$("#firstName").blur(firstNameChange());
}
Yes I'm positive all IDs exist, because the code works when I pass it as:
$("#firstName").blur(function(){
var x = document.getElementById("firstName").value;
if (x == null || x == "") {
$("#firstNameError").html(" First name can't be blank!");
}
else {
$("#firstNameError").html("");
}
})
I've looked up plenty of documentation on Javascript and JQuery syntax, debugged in Chrome, I can't figure it out.

blur expects a function reference as a parameter. firstNameChange() is calling the function immediately. Remove the ()
$("#firstName").blur(firstNameChange);

Related

How do I use an array instead of the variables in this repetitive function?

So, I have this little code in my js file:
window.onload = function Equal() {
var a = 'b1'
var b = 'box1'
var bookstorname = localStorage.getItem(a)
if (bookstorname == 1) {
document.getElementById(b).setAttribute('checked','checked');
}
if (bookstorname == 0) {
document.getElementById(b).removeAttribute('checked','checked');
}
var a = 'b2'
var b = 'box2'
var bookstorname = localStorage.getItem(a)
if (bookstorname == 1) {
document.getElementById(b).setAttribute('checked','checked');
}
if (bookstorname == 0) {
document.getElementById(b).removeAttribute('checked','checked');
}
}
The function itself is not important (it equals checkboxvalues set in the localstorage), but I execute it 2 times. First time with var a & b set to 'b1' & 'box1'. Then I run the script again (same script), but with var a & b set to 'b2' & 'box2'. Now, this code works, but my question is if there is a shorter way to write this? I can imagine some sort of array with a loop, but I could not get it to work for some reason. The 2 variables are pairs, and I know this might be a dumb question, but I can't find the answer anywhere.
You can use a second function which will accept the local storage key and the checkbox id like
window.onload = function Equal() {
setCheckboxState('box1', 'b1');
setCheckboxState('box2', 'b2');
}
function setCheckboxState(id, key) {
document.getElementById(id).checked = 1 == localStorage.getItem(key);
}
You might separate common logic into another function
window.onload = function Equal() {
function extractFromStorage(a, b) {
var bookstorname = localStorage.getItem(a)
if (bookstorname == 1) {
document.getElementById(b).setAttribute('checked','checked');
}
if (bookstorname == 0) {
document.getElementById(b).removeAttribute('checked','checked');
}
}
extractFromStorage('b1', 'box1');
extractFromStorage('b2', 'box2');
}
function doTheStuff(a, b) {
var bookstorname = localStorage.getItem(a)
if (bookstorname == 1) {
document.getElementById(b).setAttribute('checked','checked');
}
if (bookstorname == 0) {
document.getElementById(b).removeAttribute('checked','checked');
}
}
window.onload = function Equal() {
doTheStuff('b1', 'box1');
doTheStuff('b2', 'box2');
}
?
This is how I would do it.
There are several problems with your code.
You do not check that the element you are stetting an attribute to
exists. You do not check if the localStorage item you get is
defined.
You pollute the global name space with the function name Equal.
That function should not be named with a capital as it is not a Object generator.
There is no need to use setAttribute and removeAttribute, in
fact removeAttribute makes no sense in this case as you can not
remove the checked attribute from the element. BTW why use setAttribute here and not for window.onload?
The checked attribute is either true or false, it does not use the
string "checked"
Binding the load event via the onload attribute is not safe as you may
block 3rd party code, or worse 3rd party code may block you.
There is no error checking. DOM pages are dynamic environments, pages
have adverts and content from many places that can interfer with your
code. Always code with this in mind. Check for possible errors and deal with them in a friendly way for the end user. In this case I used an alert, not friendly for a normal user but for you the coder.
My solution.
// add an event listener rather than replace the event listener
window.addEventListener(
"load", // for the load event
function(){
// the update function that is called for each item;
var update = function(item){
// the right hand side equates to true if the localstorage
// is equal to "1". LocalStorage allways returns a string or
// undefined if the key is not defined.
item.element.checked = localStorage[item.storageName] === "1";
}
// safe element getter
var getElement = function(eId){
var e = document.getElementById(eId); // try and get the element
if(e === null){ // does it exist?
throw "Missing element:"+eId; // no then we can not continue
// the program stops here unless
// you catch the error and deal with
// it gracefully.
}
return e; //ok return the element.
}
// Item creator. This creates a new item.
// sName is the local storage name
// eId id the element ID
var item = function(sName, eId){
return {
storageName: sName, // set the loaclStorage name
element:getElement(eId); // get the element and check its safe
};
}
// make it all safe
try{
// create an array of items.
var items = [
item("b1","box1"),
item("b2","box2")
];
// for each item update the element status
items.forEach(update);
}catch(e){
alert("Could not update page?");
}
}
);

JavaScript - set class if e-mail is wrong

I've been blinded last 40 minutes trying to find why this isn't working.
So, I have this function to check if e-mail is valid or not
checkEmail: function () { // CHECK IF E-MAIL IS WRONG OR NOT
var check = /^[\w\.\+-]{1,}\#([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]{2,6}$/;
if (!check.test(this.options.email.get('value'))) {
return false
}
return true
},
Works well!
Now, I need to set a error class to style the input, during validation. For that I used this:
var s_email = this.options.email.get('value');
if ((s_email == '') || (s_email == this.options.email_text) || (s_email == 'Give me your e-mail') || (!checkEmail())) { // CHECK AND STYLE E-MAIL INPUT FORM
this.options.email.set("class", "error")
} else {
this.options.email.set("class", "success")
}
But doesn't work, always give me error even if a valid email was there.
One issue is that checkEmail() is being called without a context object (value of this):
if (... || (!checkEmail())) {
But, it expects to have one with a particular structure:
if (!check.test(this.options.email.get('value'))) {
// ^^^^
The value of this is determined when a function is called rather than how it's defined. But, you can use .call(thisArg) to specify its value, allowing you to pass along the current context object.
if (... || (!checkEmail.call(this))) {

Javascript string comparison not working, searched a lot?

This is my code (it's a bookmarklet)
javascript:(function(){
a=document.createElement('script');
a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');
document.body.appendChild(a);
data='[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush#mail.com","text"]]';
for(a=$.parseJSON(data),b=a.length-1;0<=b;b--){
c=a[b];
if (c[2] == 'text') {
console.log(c);
$(c[0]).val(c[1]);
}
}
})();
It used to work fine until I inserted the if statement, then it broke. The console doesn't give me any errors and I have googled a lot for javascript string comparison errors and found nothing useful.
I tried to use equals and compareTo and ended up with console errors and nothing working.
Uncaught TypeError: Cannot call method 'equals' of undefined fillform.php:1
Uncaught TypeError: Cannot call method 'compareTo' of undefined
Help is highly appreciated.
Note: The variables are named like that for a reason, it being that it was initially compiled with Google closure compiler and the if statement is being edited in.
There are several things wrong with this code; string comparison is not one of them.
1) You aren't waiting for the asynchronously loaded script to complete. This code should pretty much always fail because $.parseJSON() isn't available. In fact, once I fixed that problem, this code works fine for me:
(function(){
a=document.createElement('script');
a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');
var afterJqueryLoad = function() {
data='[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush#mail.com","text"]]';
for(a=$.parseJSON(data),b=a.length-1;0<=b;b--){
c=a[b];
if (c[2] == 'text') {
console.log(c);
$(c[0]).val(c[1]);
}
}
};
var jqueryReady = false;
a.onreadystatechange= function () {
if((this.readyState == 'complete' || this.readyState == 'loaded') && !jqueryReady) {
jqueryReady = true;
afterJqueryLoad();
}
};
a.onload = function() {
if(!jqueryReady) {
jqueryReady = true;
afterJqueryLoad();
}
};
document.body.appendChild(a);
})();
2) Use better var names (a, b, and c are not good var names).
3) Use var to scope vars correctly. Right now your code is shadowing globals and stomping on vars even within the same scope; the a var, for example, would stomp on your script elem var. (You should still change the var names per (2) but using var is not optional; you must always do this to scope vars correctly.)
4) Use spaces to help readability; your for line is unnecessarily difficult to read having no spaces.
All together now:
(function(){
var jqueryScriptElem = document.createElement('script');
jqueryScriptElem.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');
var afterJqueryLoad = function() {
var data = '[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush#mail.com","text"]]',
dataParsed = $.parseJSON(data);
for(var dataItemIndex = dataParsed.length - 1; 0 <= dataItemIndex; dataItemIndex--) {
var dataItem = dataParsed[dataItemIndex];
if (dataItem[2] == 'text') {
console.log(dataItem);
$(dataItem[0]).val(dataItem[1]);
}
}
};
var jqueryReady = false;
jqueryScriptElem.onreadystatechange = function () {
if((this.readyState == 'complete' || this.readyState == 'loaded') && !jqueryReady) {
jqueryReady = true;
afterJqueryLoad();
}
};
jqueryScriptElem.onload = function() {
if(!jqueryReady) {
jqueryReady = true;
afterJqueryLoad();
}
};
document.body.appendChild(jqueryScriptElem);
})();

Only first part of Javascript function being called

I'm having problems with this function I've made, the first part is called fine but after the first if statements nothing else is being called. I've used JSfiddle, but it doesn't indentify a serious problem.
I usually work with PHP not JS so I'm wondering if there is something simple I am missing here?
function validatequestion(form){
var e = document.getElementById("chooseqtype");
var strQtype = e.options[e.selectedIndex].value;
if(strQtype == "default"){
alert("Please select a question type");
return false;
}
if(strQtype == "textquestion"){
fail = validatetextq(form.textquestiondesc.value)
if(fail == "") return true
else {
alert(fail);
return false;
}
}
if(strQtype == "videoquestion"){
fail = validatevideoq(form.videoquestiondesc.value)
if(fail == "") return true;
else {
alert(fail);
return false;
}
}
//everything above works, after this point nothing seems to get called
var a = document.getElementById("chooseatype");
var strAtype = a.options[a.selectedIndex].value;
if(strAtype == "textanswer"){
//get the value of the number of text answers select box
var t = document.getElementById("choosetextnumber");
//put the value in variable strQtype
var strTextno = t.options[t.selectedIndex].value;
if(strTextno == "2tanswers"){
fail = validatetexta1(form.textanswer1.value)
fail += validatetexta2(form.textanswer2.value)
if(fail == "") return true;
else {
alert(fail);
return false;
}
}
}
}
If strQtype can only be one of the 3 values you are testing for then there is no way you can ever get to the second part of your code because you always return from each of those if statements.
EDIT:
What you need to do is not return when fail == "". Since you're just returning true I assume you don't need to return a value, just verify that the validation was successful. What you should do then is only test for failure, e.g. if (! fail=="" ) (syntax is prob wrong, javascript is not my first lang.) and in that case do your alert.
Or you could always just write 3 different functions, one to test each menu item, which is what I would probably do.

TypeError: Cannot call method "replace" of undefined

I'm trying to create a custom function for a google docs spreadsheet. I feel like this is a really simple problem, and I've quickly moved out of my depth.
Please help me. A point in the right direction would be much appreciated.
The googledocs script editor gives this error:
TypeError: Cannot call method "replace" of undefined. (line 50)
For this code:
function replaceGender(name, gender, comment) {
var genderedComment = String();
var name;
var gender;
var comment;
if(gender == "m")
{
genderedComment = ungenderedComment.replace("(name)", name).replace(/\(He\/She\)/g,"He").replace(/\(His\/\Her\)/g,"His").replace(/\(his\/\her\)/g,"his").replace(/\(him\/\her\)/g,"him").replace(/\(he\/\she\)/g,"he");
}
else
{
genderedComment = ungenderedComment.replace("(name)", name).replace(/\(He\/She\)/g,"She").replace(/\(His\/\Her\)/g,"Her").replace(/\(his\/\her\)/g,"her").replace(/\(him\/\her\)/g,"her").replace(/\(he\/\she\)/g,"she");
}
return genderedComment;
};
I think its easy, but I'm doing something wrong.
I've changed the code and it works now without error, but the last.replace(/\(he\/\she\)/g,"she"); and .replace(/\(he\/\she\)/g,"he");
don't replace.?? no idea...
thanks again for all your help... as i said im learning a lot.
here is the code now
function replaceGender(name, gender, comment) {
if(gender == "m")
{
comment = comment.replace(/\(name\)/g, name).replace(/\(He\/She\)/g,"He").replace(/\(His\/\Her\)/g,"His").replace(/\(his\/\her\)/g,"his").replace(/\(him\/\her\)/g,"him").replace(/\(he\/\she\)/g,"he");
}
else if(gender == "f")
{
comment = comment.replace(/\(name\)/g, name).replace(/\(He\/She\)/g,"She").replace(/\(His\/\Her\)/g,"Her").replace(/\(his\/\her\)/g,"her").replace(/\(him\/\her\)/g,"her").replace(/\(he\/\she\)/g,"she");
}
return comment;
};
Several problems actually, aside from the undefined error. You don't want to declare those variables at the top of the function, since what you need is already passed into the function.
function replaceGender(name, gender, comment) {
var genderedComment;
if(gender == "m")
{
genderedComment = comment.replace("(name)", name).replace(/\(He\/She\)/g,"He").replace(/\(His\/\Her\)/g,"His").replace(/\(his\/\her\)/g,"his").replace(/\(him\/\her\)/g,"him").replace(/\(he\/\she\)/g,"he");
}
else
{
genderedComment = comment.replace("(name)", name).replace(/\(He\/She\)/g,"She").replace(/\(His\/\Her\)/g,"Her").replace(/\(his\/\her\)/g,"her").replace(/\(him\/\her\)/g,"her").replace(/\(he\/\she\)/g,"she");
}
return genderedComment;
};
Your variable named ungenderedComment is not defined.
You can test to see if a variable is undefined like this:
if (typeof someVariable === 'undefined') {
alert("variable is undefined");
}
Or like this:
if (! someVariable) {
alert("variable is either undefined, null, false, zero, or some falsey value");
}
EDIT: as the comments point out, it looks like you're using the wrong variable altogether!

Categories