javascript - class vs addClassName jscript -
what difference, in using class vs addclassname jscript?
in loop, whenever adding class existing class, after each loop cycle adding new class it. condition enter loop changing after each time.
when used class instead of addclassname started work should be. after each reverse session loop matching condition.
how can explained?
working version:
(var = 0; < fields.length; i++) //instead of .each { alert(0.5); alert(fields[i].classname); if (fields[i].classname == 'text' || fields[i].classname == 'date' || fields[i].classname == 'number' || fields[i].classname == 'text error' || fields[i].classname == 'date error' || fields[i].classname == 'number error' || fields[i].classname == 'text valid' || fields[i].classname == 'date valid' || fields[i].classname == 'number valid' || fields[i].classname == 'text valid error' || fields[i].classname == 'date valid error' || fields[i].classname == 'number valid error' ) { alert(0.3); var val = fields[i]; var classname = ""; if(val.value.length <= 4) { classname = fields[i].classname + " error"; fields[i].class = classname; effect.shake(fields[i], { times:3 }, 50); errorstring = 'please complete required fields.'; alert(0.6); alert(val.value); alert(0.66); alert(fields[i].name); alert(val.value.class); //error++; } else { classname = fields[i].classname + " valid"; fields[i].class = classname; alert(8.5); alert(val.value.class); } } alert(8.8); alert(fields[i].class); }
version not working:
(var = 0; < fields.length; i++) //instead of .each { if (fields[i].classname == 'text' || fields[i].classname == 'date' || fields[i].classname == 'number' || fields[i].classname == 'text error' || fields[i].classname == 'date error' || fields[i].classname == 'number error' ) { var val = fields[i]; if(val.value.length <= 4) { fields[i].addclassname('error'); effect.shake(fields[i], { times:3 }, 50); errorstring = 'please complete required fields.'; error++; } else { fields[i].addclassname('valid'); } } }
explanation
class
reserved keyword (for possible future use), therefore should not used object attribute (like someobject.reservedkeyword
) , therefore classname
instead of class
used nnnnnn points out in comment question.
in code, won't work:
fields[i].class = classname
...but 1 will
fields[i].classname = classname
this source code of prototypejs addclassname
function addclassname(element, classname) { if (!(element = $(element))) return; if (!hasclassname(element, classname)) element.classname += (element.classname ? ' ' : '') + classname; return element; }
solution
therefore use addclassname
, removeclassname
, hasclassname
. in code:
for (var = 0; < fields.length; i++) { if(fields[i].hasclassname("text") || fields[i].hasclassname("number") || fields[i].hasclassname("date")) { if(fields[i].value.length<=4) { fields[i].addclassname("error"); fields[i].removeclassname("valid"); effect.shake(fields[i], { times:3 }, 50); errorstring = 'please complete required fields.'; } else { fields[i].addclassname("valid"); fields[i].removeclassname("error"); } } }
note: in modern browsers use classlist
attribute instead:
prototype.js | modern browsers --------------------------------------------------------------------- element.hasclassname("someclass") | element.classlist.contains("someclass") element.addclassname("someclass") | element.classlist.add("someclass") element.removeclassname("someclass") | element.classlist.remove("someclass")
Comments
Post a Comment