Develop Reference

How do I set a javascript variable inside a for loop to be used afterwards

So, I'm creating a login form, and when certain criteria aren't met to continue after the form, I am setting a variable to be tested after I've tested all the criteria. IF that variable ($cantcontinue) is set to 'true' I want to send a console message with the criteria that isn't met. Here is my code:
function testfields() {
// Ask if logging in or Creating Account
//Logging In:
if (document.getElementById("tEmail").style.display != "unset") {
var loginelements = ["Username", "Password"];
var text = "";
var i;
for (i = 0; i < loginelements.length; i++) {
//Check all fields are full:
if (document.getElementById(loginelements[i]).value == "") {
document.getElementById(loginelements[i]).style.background = '#ff6060'
var cantcontinue = true;
console.log(loginelements[i] + " is not set,")
} else {
document.getElementById(loginelements[i]).style.background = '#f7f7f7'
}
}
if ($cantcontinue != true) {
console.log("Create Account")
} else {
console.log("Could Not Create Account")
}
//Create a new Account:
} else {
var createelements = ["Username", "Password", "tEmaili", "tConfirmi"];
var text = "";
var i;
for (i = 0; i < createelements.length; i++) {
//Check all fields are full:
if (document.getElementById(createelements[i]).value == "") {
document.getElementById(createelements[i]).style.background = '#ff6060'
var cantcontinue = true;
console.log(createelements[i] + " is not set,")
} else {
document.getElementById(createelements[i]).style.background = '#f7f7f7'
}
}
//If passwords Match
if (document.getElementById("Password").value != document.getElementById("tConfirmi").value) {
var cantcontinue = true;
document.getElementById("tConfirmi").style.background = '#ff6060'
document.getElementById("tConfirmi").value = ''
console.log(" Passwords didn't Match,");
}
if ($cantcontinue != true) {
console.log("Create Account")
} else {
console.log("Could Not Create Account")
}
}
}

$cantcontinue !== cantcontinue;//....
Also
if (cantcontinue != true) {
equals:
if (!cantcontinue) {
Sidenote: Please don't use "$" unless you're using jQuery. It reminds me of PHP ( brrrrr...)

Sort only array elements JavaScript which has a CSS property

I want to create an unordered list. The order should be given by their id (Which is a number. The smallest is at the bottom.)
BUT if a certain li does not have a a CSS property (text-decoration:line-through in my case.) Then they should be at the bottom anyway.
I am trying to make a To Do list, where checked elements are at the bottom, but when you uncheck them, they jump back to place.
http://codepen.io/balazsorban44/pen/Gjzwbp
const inputArea = document.getElementById('todo-input');
const list = document.getElementById('tasks');
tasks = [];
function loaded() {
inputArea.focus();
}
function enter() {
if (event.keyCode == 13) {
addTask()
}
}
function refresh(array) {
var task = document.createElement('li');
const checkBox = document.createElement('input');
checkBox.setAttribute('type', 'checkbox');
checkBox.setAttribute('onclick', 'toggleCheckBox()');
task.appendChild(checkBox);
task.appendChild(document.createTextNode(array[array.length - 1].task));
task.id = array[array.length - 1].timestamp.getTime()
list.appendChild(task);
return list;
}
function addTask() {
if (inputArea.value != '') {
tasks.push({
timestamp: new Date(),
task: inputArea.value
});
inputArea.value = '';
inputArea.focus();
refresh(tasks);
doneOrUndone();
inputArea.placeholder = 'Click + or press Enter.'
} else {
inputArea.placeholder = 'Write something'
}
}
function doneOrUndone() {
var done = 0
const out = document.getElementById('out')
for (var i = 0; i < tasks.length; i++) {
if (document.getElementsByTagName('li')[i].style.textDecoration != '') {
done++
}
}
out.value = parseInt(done) + '/' + parseInt(tasks.length) + ':'
}
function toggleCheckBox() {
const task = event.target.parentNode
if (task.style.textDecoration == '') {
task.style.textDecoration = 'line-through';
list.appendChild(task)
doneOrUndone()
} else {
task.style.textDecoration = ''
for (var i = 0; i < tasks.length; i++) {
if (task.id < tasks[i].timestamp.getTime() && list.childNodes[0].style.textDecoration == 'line-through') {
if (task.id > list.childNodes[0].id) {
list.insertBefore(task, list.childNodes[0]);
break;
}
} else {
list.insertBefore(task, list.childNodes[i]);
break
}
}
doneOrUndone()
}
}

I think the real problem is that when setting style.textDecoration to line-through, the actual property that is set is textDecorationLine.
Your line if (task.style.textDecoration == '') is therefore always true.
You can replace textDecoration with textDecorationLine and it should work.
http://codepen.io/anon/pen/bwzzkP
The underlying cause of this problem is, in my opinion, that you're using an element's style attribute to monitor state. I'd advice to either:
Store state in javascript, or
Store state in a class, or
Store state in a custom data- attribute
For example:
const task = event.target.parentNode;
const isDone = task.getAttribute("data-done");
task.style.textDecoration = !isDone ? 'line-through' : '';
task.setAttribute("data-done", !isDone);

How to get an object from an XML document?

When parsing documents using the excellent libxmljs library in Node.js, I stumbled across a case where a lot of nested elements were found, and the only thing I had to do was create a JS object from it.
Here is what the code looks like :
if (node.type() == 'element') {
switch(node.name()) {
case 'element1': {
myObject.element1 = {}
for (var i = 0; i < node.childNodes().length; i++) {
if(node.type() == 'element') {
switch(node.name()) {
case 'element2': {
myObject.element1.element2 = node.text()
...
}}}}}}}}
/* didn't count the number of closing brackets, but you get the idea ^_^ */
Is there a faster or built-in way to do such things, create an object from an XML string (or part of it) using libxmlJS ?
Note that, if it helps, the parsed XML must be validated against a XTD schema (which can really easily be done using this library)
Thanks

Here is some non-working code that can be found on this article :
function XML2jsobj(node) {
var data = {};
// append a value
function Add(name, value) {
if (data[name]) {
if (data[name].constructor != Array) {
data[name] = [data[name]];
}
data[name][data[name].length] = value;
}
else {
data[name] = value;
}
};
// element attributes
var c, cn;
for (c = 0; cn = node.attributes[c]; c++) {
Add(cn.name, cn.value);
}
// child elements
for (c = 0; cn = node.childNodes[c]; c++) {
if (cn.nodeType == 1) {
if (cn.childNodes.length == 1 && cn.firstChild.nodeType == 3) {
// text value
Add(cn.nodeName, cn.firstChild.nodeValue);
}
else {
// sub-object
Add(cn.nodeName, XML2jsobj(cn));
}
}
}
return data;
}
From that code, I could build something that seems to work with the latest libxmljs release, here it is :
function XML2jsobj(node) {
var data = {};
// append a value
function Add(name, value) {
if (data[name]) {
if (data[name].constructor != Array) {
data[name] = [data[name]];
}
data[name][data[name].length] = value;
}
else {
data[name] = value;
}
};
for (var c = 0; c < node.attrs().length; c++) {
var cn = node.attrs()[c];
Add(cn.name, cn.value);
}
// child elements
for (var c = 0; c < node.childNodes().length; c++) {
var cn = node.childNodes()[c];
if (cn.type() == 'element') {
if (cn.childNodes().length == 1 && cn.childNodes()[0].type() == 'text') {
// text value
Add(cn.name(), cn.childNodes()[0].text());
}
else {
// sub-object
Add(cn.name(), XML2jsobj(cn));
}
}
}
return data;
}
I hope this will have helped someone.

How to display the string content of this array all at once using javascript?

I am using this for form validation. I call this function when there is an error and i send it a string as a parameter.
var errList = new Array();
function aerrorList(error){
errList.push(error);
for (var i=0; i < errList.length; i++){
alert(errList[i]);
}
}
here is one of the validation checks:
function lNameValidate() {
var lName = document.getElementById("lastname");
if (lName.value.length < 20 && /^[a-zA-Z0-9- ]*$/.test(lName.value)){
stNumValidate();
} else {
lName.style.border = "red";
errorList("Invalid lName Format");
stNumValidate();
}
}
The current array (using alert) displays the error in a number of popup boxes with only 1 error string each. i want it to display 1 alert which would show all the errors in a list similar to outputting it in a bullet point way.

You can append all the errors to one var and then display it:
function aerrorList(error){
errList.push(error);
var errors = "";
for (var i=0; i < errList.length; i++){
errors += errList[i] + "\n";
}
alert(errors);
}

You could use join method on an array, Here's an example:
errors=['error1','error2','error3']
Here, a is an array of list of your errors, now you can glue them together using whatever you want like this:
error_string=error.join("\n*")
Finally you can make an alert:
alert(error_string)

Try this:
var Errors = {
messages: [],
push: function(message) {
this.messages.push(message);
},
alert: function() {
alert(this.messages.join("\n"));
},
showInElement: function(element) {
element.innerHTML = this.messages.join('<br/>');
},
clear: function() {
this.messages = [];
}
}
var age = 1;
if(age < 18) {
Errors.push("Come back when You 18+");
}
var name = "Jack";
if(name != "John") {
Errors.push("You're not John!");
}
Errors.alert();
var element = document.getElementById('content');
Errors.showInElement(element);
Errors.clear();
<div id="content"></div>

So I ended up using this:
var errList = new Array();
function errorList(error){
errList.push(error);
}
function showErrors() {
alert(errList.join("\n"));
}
where i just call showErrors on the very last validation check if the errList length is > 1 as such:
function emailRestrict() {
var eVal = document.getElementById("email").value;
var atPos = eVal.indexOf("#");
var dotPos = eVal.lastIndexOf(".");
if (atPos < 1 || dotPos < atPos || dotPos >= eVal.length) {
errorList("not valid email");
if (errList.length > 1){
showErrors();
}
return false;
}
else {
if (errList.length > 1){
showErrors();
}
return true;
}
}

javascript function return "undefine" from jsp page

i have a jsp page and call a JS function which is in some abc.js file from this JSP page.
i have included this js file to jsp page.
JSP JavaScript Code:-
function doFinish(tableId, col, field)
{
var oldselectedCells = "";
var selItemHandle = "";
var selRightItemHandle = "";
var left = -1;
var right = -1;
// Get the table (tBody) section
var tBody = document.getElementById(tableId);
// get field in which selected columns are stored
var selectedCellsFld = document.getElementById(tableId + datatableSelectedCells);
selectedCellsFld.value = oldselectedCells;
for (var r = 0; r < tBody.rows.length; r++)
{
var row = tBody.rows[r];
if (row.cells[col].childNodes[0].checked == true)
{
selectedCellsFld.value = oldselectedCells +
row.cells[col].childNodes[0].id;
selItemHandle = row.cells[col].childNodes[0].value
oldselectedCells = selectedCellsFld.value + datatableOnLoadDivider;
left = selItemHandle.indexOf("=");
right = selItemHandle.length;
selRightItemHandle = selItemHandle.substring(left+1,right);
var index=getColumnIndex(tBody,"Name");
if(index!=null)
{
if(field == 1)
{
window.opener.document.TemplateForm.eds_asbactionscfg_item_handle_child_physpart.value = selRightItemHandle;
window.opener.document.TemplateForm.ChildPhysicalPart.value = row.cells[index].childNodes[0].innerHTML;
}
else if (field == 2)
{
window.opener.document.TemplateForm.eds_asbactionscfg_dev_doc_item_handle_name.value = selRightItemHandle;
window.opener.document.TemplateForm.DeviationObject.value = row.cells[index].childNodes[0].innerHTML;
}
else if (field == 3)
{
window.opener.document.TemplateForm.eds_asbactionscfg_dev_doc_item_handle_name.value = selRightItemHandle;
window.opener.document.TemplateForm.DeviationObject.value = row.cells[index].childNodes[0].innerHTML;
}
}
}
}
window.close();
}
JS Code:-
function getColumnIndex(tBody,columnName)
{
var cells = tBody.parentNode.getElementsByTagName('th');
for (var i=0;i<cells.length; i++)
{
if(cells[i].hasChildNodes())
{
if(cells[i].childNodes[0].innerHTML.replace(/(\r\n|\n|\r)/gm ,"").trim() == columnName)
{
return i;
}
}
}
}
i had debug this code with firebug & calling getColumnIndex(tBody,columnName) function works fine but when it return to caller the var index=getColumnIndex(tBody,"Name"); the index value is "undefine".
suggest some solution.

getColumnIndex(tBody,columnName) function works fine.
as if it matches this if condition
if(cells[i].childNodes[0].innerHTML.replace(/(\r\n|\n|\r)/gm ,"").trim() == columnName)
{
return i;
}
so that it returns something.
but when you replace this
var index=getColumnIndex(tBody,"Name"); so that coulmnName would be "Name" in String.
And it doesn't match with any columnName so that your condition going to be wrong and function doesn't return anything.
var index=getColumnIndex(tBody,"Name"); the index value is "undefine".
suggestion is put some else condition on that and return some error message like this :
if(cells[i].childNodes[0].innerHTML.replace(/(\r\n|\n|\r)/gm ,"").trim() == columnName)
{
return i;
} else{
// put some error message
// return null
}

i had debug this code with firebug & calling getColumnIndex(tBody,columnName) function works fine
From this, I'm assuming that there isn't anything wrong with the implementation of your getColumnIndex function, so your issue with getting an undefined value must have to do with when this function is returning a value.
but when it return to caller the var index=getColumnIndex(tBody,"Name"); the index value is "undefine".
This leads me to assume that your tBody variable is not being set correctly, given that the "function works fine".
I'm assuming there is a case in your code where the conditions of your getColumnIndex function is not met.
function getColumnIndex(tBody,columnName)
{
var cells = tBody.parentNode.getElementsByTagName('th');
for (var i=0;i<cells.length; i++)
{
if(cells[i].hasChildNodes())
{
if(cells[i].childNodes[0].innerHTML.replace(/(\r\n|\n|\r)/gm ,"").trim() == columnName)
{
return i;
}
}
}
// If your code reaches this point, then the prior conditions have not been met
// You can choose to do something else here for return false/undefined etc.
return undefined;
}