We Keep Coding

How can we reduce if else condition in javascript?

I am working on node js and mysql here i am using profile incomplete or complete logic so i have to check all the fields or empty or not so i have 28 fields i have used 28 if else can we make shorter code.
Here my code
so how we can reduce my code if we can reduce our code please share your solution.
Here no error this code is correct But I need to make shorter code it will be good.
let points = 0;
let point1 = 0;
let point2 = 0;
let point3 = 0;
let point4 = 0;
let point5 = 0;
let point6 = 0;
let point7 = 0;
let point8 = 0;
let point9 = 0;
let point10 = 0;
let point11 = 0;
let point12 = 0;
let point13 = 0;
let point14 = 0;
let point15 = 0;
let point16 = 0;
let point17 = 0;
let point18 = 0;
let point19 = 0;
let point20 = 0;
let point21 = 0;
let point22 = 0;
let point23 = 0;
let point24 = 0;
let point25 = 0;
let point26 = 0;
if (profileRes[0].username == null || profileRes[0].username == "") {
point1 = points + 10;
} else if (profileRes[0].username != null || profileRes[0].username != "") {
point1 = points += 0;
}
if (profileRes[0].phone == null || profileRes[0].phone == "") {
point2 = points + 10;
} else if (profileRes[0].phone != null || profileRes[0].phone != "") {
point2 = points += 0;
}
if (profileRes[0].email == null || profileRes[0].email == "") {
point3 = points + 10;
} else if (profileRes[0].email != null || profileRes[0].email != "") {
point3 = points += 0;
}
if (profileRes[0].company_name == null || profileRes[0].company_name == "") {
point4 = points + 10;
} else if (profileRes[0].company_name != null || profileRes[0].company_name != "") {
point4 = points += 0;
}
if (profileRes[0].profile_description == null || profileRes[0].profile_description == "") {
point5 = points + 10;
} else if (profileRes[0].profile_description != null || profileRes[0].profile_description != "") {
point5 = points += 0;
}
if (profileRes[0].short_description == null || profileRes[0].short_description == "") {
point6 = points + 10;
} else if (profileRes[0].short_description != null || profileRes[0].short_description != "") {
point6 = points += 0;
}
if (profileRes[0].company_url == null || profileRes[0].company_url == "") {
point7 = points + 10;
} else if (profileRes[0].company_url != null || profileRes[0].company_url != "") {
point7 = points += 0;
}
if (profileRes[0].company_linkedin == null || profileRes[0].company_linkedin == "") {
point8 = points + 10;
} else if (profileRes[0].company_linkedin != null || profileRes[0].company_linkedin != "") {
point8 = points += 0;
}
if (profileRes[0].company_instagram == null || profileRes[0].company_instagram == "") {
point9 = points + 10;
} else if (profileRes[0].company_instagram != null || profileRes[0].company_instagram != "") {
point9 = points += 0;
}
if (profileRes[0].company_facebook == null || profileRes[0].company_facebook == "") {
point10 = points + 10;
} else if (profileRes[0].company_facebook != null || profileRes[0].company_facebook != "") {
point10 = points += 0;
}
if (profileRes[0].number_of_employees == null || profileRes[0].number_of_employees == "") {
point11 = points + 10;
} else if (profileRes[0].number_of_employees != null || profileRes[0].number_of_employees != "") {
point11 = points += 0;
}
if (profileRes[0].company_logo == null || profileRes[0].company_logo == "") {
point12 = points + 10;
} else if (profileRes[0].company_logo != null || profileRes[0].company_logo != "") {
point12 = points += 0;
}
if (profileRes[0].founding_year == null || profileRes[0].founding_year == "") {
point13 = points + 10;
} else if (profileRes[0].founding_year != null || profileRes[0].founding_year != "") {
point13 = points += 0;
}
if (profileRes[0].is_profile_published == null || profileRes[0].is_profile_published == "") {
point14 = points + 10;
} else if (profileRes[0].is_profile_published != null || profileRes[0].is_profile_published != "") {
point14 = points += 0;
}
if (profileRes[0].legal_name == null || profileRes[0].legal_name == "") {
point15 = points + 10;
} else if (profileRes[0].legal_name != null || profileRes[0].legal_name != "") {
point15 = points += 0;
}
if (profileRes[0].billing_address == null || profileRes[0].billing_address == "") {
point16 = points + 10;
} else if (profileRes[0].billing_address != null || profileRes[0].billing_address != "") {
point16 = points += 0;
}
if (profileRes[0].zip_code == null || profileRes[0].zip_code == "") {
point17 = points + 10;
} else if (profileRes[0].zip_code != null || profileRes[0].zip_code != "") {
point17 = points += 0;
}
if (profileRes[0].vat_number == null || profileRes[0].vat_number == "") {
point18 = points + 10;
} else if (profileRes[0].vat_number != null || profileRes[0].vat_number != "") {
point18 = points += 0;
}
if (profileRes[0].sdi_codex == null || profileRes[0].sdi_codex == "") {
point19 = points + 10;
} else if (profileRes[0].sdi_codex != null || profileRes[0].sdi_codex != "") {
point19 = points += 0;
}
if (profileRes[0].benefits == null || profileRes[0].benefits == "") {
point20 = points + 10;
} else if (profileRes[0].benefits != null || profileRes[0].benefits != "") {
point20 = points += 0;
}
if (profileRes[0].category == null || profileRes[0].category == "") {
point21 = points + 10;
} else if (profileRes[0].category != null || profileRes[0].category != "") {
point21 = points += 0;
}
if (profileRes[0].branch == null || profileRes[0].branch == "") {
point22 = points + 10;
} else if (profileRes[0].branch != null || profileRes[0].branch != "") {
point22 = points += 0;
}
if (profileRes[0].coreActivities == null || profileRes[0].coreActivities == "") {
point23 = points + 10;
} else if (profileRes[0].coreActivities != null || profileRes[0].coreActivities != "") {
point23 = points += 0;
}
if (profileRes[0].districts == null || profileRes[0].districts == "") {
point24 = points + 10;
} else if (profileRes[0].districts != null || profileRes[0].districts != "") {
point24 = points += 0;
}
if (profileRes[0].legalFormCompany == null || profileRes[0].legalFormCompany == "") {
point25 = points + 10;
} else if (profileRes[0].legalFormCompany != null || profileRes[0].legalFormCompany != "") {
point25 = points += 0;
}
if (profileRes[0].commune == null || profileRes[0].commune == "") {
point26 = points + 10;
} else if (profileRes[0].commune != null || profileRes[0].commune != "") {
point26 = points += 0;
}
else {
}
let pint = point1 + point2 + point3 + point4 + point5 + point6 + point7 + point8 + point9 + point10 +point11 + point12 + point13 + point14 + point15 + point16 + point17 + point18 + point19 + point20 + point21 + point22 + point23 + point24 + point25 + point26;
let percentage = (pint * 100) / 260;

Should all keys in the profileRes[0] have a corresponding points variable? If yes, then something like this might work. This solution will put all of your points into one object instead of a list of variables:
const pointsMap = Object.entries(profileRes[0]).reduce((acc, [key, value]) => {
acc[key] = !!value ? 0 : 10
return acc
}, {})
// returns an object that has key/value pairs accessible by the profileRes[0] keys
// for example, {username: 10, email: 0, phone: 10...}
Note, the above answer uses !!value to determine if the value is truthy. This means values like null and "" will fail. undefined will also fail this check. If a key in profileRes[0] can be undefined and undefined should be considered a valid value, the line can change to be the following instead:
acc[key] = (value === null || value === "") ? 10 : 0

You can remove all the points variables
let points = 0;
for (let key in profileRes[0]) {
if (profileRes[0][key] === null || profileRes[0][key] === '') {
points += 10;
} else {
points += 0;
}
}
let percentage = (points * 100) / 260;

Divide two Inputs and multiply 100

I have the two functions match and and total working properly. I want the function total project match to divide the first function over the second function multiply times 100. the last function isn't working!
Here is my code so far :
matchContribution.subscribe(function (newValue) {
if (newValue != undefined && newValue != '') {
matchContribution(formatInt(newValue));
var dataValue = Number(matchContribution().replace(/\,/g, ''));
if (dataValue > 999999999999.99 || dataValue < 0) {
matchContribution('');
}
if (loading == false) {
sendCommand('SAVE');
}
}
});
var totalProjectCost = ko.computed(function () {
var total = 0;
var hasUserInput = false;
if (grantRequest() != '' && grantRequest() != undefined) {
hasUserInput = true;
total = total + Number(String(grantRequest()).replace(/\,/g, ''));
}
if (matchContribution() != '' && matchContribution() != undefined) {
hasUserInput = true;
total = total + Number(String(matchContribution()).replace(/\,/g, ''));
}
if (total == 0) {
if (!hasUserInput)
return '';
else
return formatInt('0');
}
else {
if (loading == false) {
sendCommand('SAVE');
}
return formatInt(total);
}
});
var totalProjectMatch = matchContribution()/totalProjectCost();
if(totalProjectMatch>=0)
totalProjectMatch = Math.floor(totalProjectMatch);
else
totalProjectMatch = Math.ceil(totalProjectMatch);

var totalProjectMatch = ko.computed(function () {
var total = 0;
var hasUserInput = false;
if ((grantRequest() != '' && grantRequest() != undefined) && (matchContribution() != '' && matchContribution() != undefined) && (totalProjectCost() != '' && totalProjectCost() != undefined)) {
hasUserInput = true;
total = Number(String(matchContribution()).replace(/\,/g, '')) / Number(String(totalProjectCost()).replace(/\,/g, ''));
total = total * 100;
}
if (total == 0) {
if (!hasUserInput)
return '';
else
return formatInt('0');
}
else {
if (loading == false) {
sendCommand('SAVE');
}
return formatNumber(total);
}
});
I solved the problem! Thanks a lot! Hope that helps other people.

Using for loop to order dependency

var input = [ "KittenService: ", "Leetmeme: Cyberportal", "Cyberportal: Ice", "CamelCaser: KittenService", "Fraudstream: Leetmeme", "Ice: "];
var output = [];
function valid(input) {
for(var i = 0; i < input.length; i++) {
var array = input[i].trim().split(':');
var packageName = array[0].trim();
var dependencyName = array[1].trim();
if(array.length > 1 && dependencyName === '') {
if(output.indexOf(packageName) === -1) {
output.push(packageName);
}
else {
return;
}
}
else if(array.length > 1 && dependencyName !== '') {
if (output.indexOf(dependencyName) === -1) {
output.push(dependencyName);
if(output.indexOf(dependencyName) > -1) {
if(output.indexOf(packageName) > -1) {
continue;
}
else {
output.push(packageName);
}
}
}
else if(output.indexOf(dependencyName) > -1) {
output.push(packageName);
}
}
}
return output.join(', ');
}
valid(input);
I am trying to figure out way to make the output to become
"KittenService, Ice, Cyberportal, Leetmeme, CamelCaser, Fraudstream"
Right it logs
'KittenService, Cyberportal, Leetmeme, Ice, CamelCaser, Fraudstream'
I am not sure how to make all the input with dependencies to pushed before input with dependencies.

Problem was just that you were returning if no package name instead of using a continue.
var input =[ "KittenService: CamelCaser", "CamelCaser: " ]
var output = [];
function valid(input) {
for(var i = 0; i < input.length; i++) {
var array = input[i].trim().split(':');
var packageName = array[0].trim();
var dependencyName = array[1].trim();
if(array.length > 1 && dependencyName === '') {
if(output.indexOf(packageName) === -1) {
output.push(packageName);
}
else {
continue;
}
}
else if(array.length > 1 && dependencyName !== '') {
if (output.indexOf(dependencyName) === -1) {
output.push(dependencyName);
if(output.indexOf(dependencyName) > -1) {
output.push(packageName);
}
}
}
}
return output;
}
console.log(valid(input));

Property of an array cannot be read

I have an extremely complex page that uses dynamic information to generate a layout with the correct and relevant information.
I am storing the data as an object. I have essentially 15 objects with multiple fields of user-submitted data.
Everything is stored and output correctly on the page, however now I am trying to validate and the information when the user tries to edit it from the edit page. The information is all being generated and laid out correctly, however I keep getting the same errors on the validation of the information.
The validation should go through and determine if a field was filled out correctly, and if it was not record a variable and add it to an alert variable. Then once it i done running the validation function it should pop up an alert with what fields still need to be filled in.
I keep receiving an error when it runs through the for loop toward the bottom. It says 'Uncaught TypeError' Cannot read property 'questionNumber' of undefined.
Above the code below I store the object and the properties, but this function is where everything is going awry. Note that there are also 15 arrays in the qtest object, but for the sake of simplification I removed all but a few.
I have gotten this to work on smaller, simpler forms, however because of the complexity and storage method I think this may be missing something or I might not be accessing something correctly. The code is very long and below, I've scaled back as much as possible. Please, if you have any insight or help you can provide I would be extremely grateful. Thank you!
var validateQ = function(qTextID, qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4, VisRef, Youtube, Vimeo, ImgID) {
if (document.getElementById('ItemName').value == "") {
var quizName = true;
};
if (jQuery('select[name="CAT_Custom_14"]').val() == 'Quiz') {
if (jQuery(qTextID).val() == "") {
var qText = true;
};
if (jQuery('CAT_Custom_249').val() == " ") {
var quizscore1 = true;
};
if (jQuery(qAnswerType).val() == " ") {
var answertype = true;
} else if (jQuery(qAnswerType).val() == 'True/False') {
if (!jQuery(TFID).is(':checked')) {
var tfanswer = true;
var mcanswer = false;
};
} else if (jQuery(qAnswerType).val() == 'Multiple Choice') {
if (!jQuery(MCID).is(':checked')) {
var mcanswer = true;
var tfanswer = false;
};
if (jQuery(MCText1).val() == "" || jQuery(MCText2).val() == "" || jQuery(MCText3).val() == "" || jQuery(MCText4).val() == "") {
var mcTextfields = true;
} else {
mcTextfields = false;
};
};
} else if (jQuery('select[name="CAT_Custom_14"]').val() == 'Survey') {
if (jQuery(qTextID).val() == "") {
var qText = true;
};
if (!jQuery(sAnswers1).is(':checked')) {
var surveyAnswers1 = true;
} else {
surveyAnswers1 = false;
};
};
if (jQuery(VisRef).val() != " ") {
if (jQuery(VisRef).val() == "Youtube Video" && jQuery(Youtube).val() == "") {
var youtubeVal = true;
} else if (jQuery(VisRef).val() == "Vimeo Video" && jQuery(Vimeo).val() == "") {
var vimeoVal = true;
} else {
// validateImage(ImgID);
};
} else {
youtubeVal = false;
vimeoVal = false;
var tempImgCheck = false;
};
if (numCheck == 15) {
numCheck = 16;
};
var qName = "- Quiz or Survey Name\n";
var shortDescription = "- A short description of the Quiz/Survey\n";
var scoreMessage = "- A required passing score\n";
var QTextMessage = "- Question text\n";
var answerTMessage = "- An answer type\n";
var mcFields = "- The Multiple Choice answer fields\n";
var mcMessage = "- The correct Multiple Choice Answer\n"
var tfMessage = "- The correct True/False answer\n";
var vimMessage = "- A Vimeo Video code\n";
var ytMessage = "- A Youtube Video code\n";
var imgMessage = "- A reference image\n";
var surveyMessage = "- An answer type\n";
if (quizName == true || quizscore1 == true || qText == true || answertype == true || tfanswer == true || mcanswer == true || mcTextfields == true || youtubeVal == true || vimeoVal == true || tempImgCheck == true || surveyAnswers1 == true) {
var alertText = "It appears that you have not finished completing question" + question[i].questionNumber + ". Please ensure that you have completed the following question fields.\n";
if (quizName == true) {
alertText = alertText + qName;
};
if (quizscore1 == true) {
alertText = alertText + scoreMessage;
};
if (qText == true) {
alertText = alertText + QTextMessage;
};
if (answertype == true) {
alertText = alertText + answerTMessage;
};
if (tfanswer == true) {
alertText = alertText + tfMessage;
};
if (mcanswer == true) {
alertText = alertText + mcMessage;
};
if (mcTextfields == true) {
alertText = alertText + mcFields;
};
if (youtubeVal == true) {
alertText = alertText + ytMessage;
};
if (vimeoVal == true) {
alertText = alertText + vimMessage;
};
if (tempImgCheck == true) {
alertText = alertText + imgMessage;
};
if (surveyAnswers1 == true) {
alertText = alertText + surveyMessage;
};
if (quizscore1 == true) {
alertText = alertText + scoreMessage;
};
confirm(alertText);
};
};
var numCheck = 1;
var checkQuizQ = function() {
for (j = 1; j<= qtest.length; j++) {
numCheck = numCheck + 1;
if (qtest[j].questionNumber == "1") {
validateQ("CAT_Custom_3", "CAT_Custom_8", "CAT_Custom_19", "CAT_Custom_18", "CAT_Custom_4", "CAT_Custom_5", "CAT_Custom_6", "CAT_Custom_7", "CAT_Custom_9", "CAT_Custom_10", "CAT_Custom_11", "CAT_Custom_12", "CAT_Custom_230");
} else if (qtest[j].questionNumber == "2") {
validateQ("CAT_Custom_20", "CAT_Custom_21", "CAT_Custom_29", "CAT_Custom_26", "CAT_Custom_22", "CAT_Custom_23", "CAT_Custom_24", "CAT_Custom_25", "CAT_Custom_30", "CAT_Custom_31", "CAT_Custom_32", "CAT_Custom_33", "CAT_Custom_231");
} else if (qtest[j].questionNumber == "3") {
validateQ("CAT_Custom_35", "CAT_Custom_36", "CAT_Custom_37", "CAT_Custom_40", "CAT_Custom_41", "CAT_Custom_42", "CAT_Custom_43", "CAT_Custom_44", "CAT_Custom_45", "CAT_Custom_46", "CAT_Custom_47", "CAT_Custom_48", "CAT_Custom_232");
} else if (qtest[j].questionNumber == "4") {
};
};
document.getElementById('catcustomcontentbutton').style.display = "block";
document.getElementById("qsValidate").style.display = "none";
};

Since qtest looks like an array, its index starts from 0 to length - 1 so when j is length the value of qtest[j] will be undefined.
So change the loop as
for (j = 0; j< qtest.length; j++) {
//
}

How to apply different colors to Placeholder and input textbox value?

I am using http://jamesallardice.github.io/Placeholders.js/ placeholders.jquery.js (v3.0.2 unminified, 18kb) this file for Internet Explorer 9 (IE9).
In this file I changed
placeholderStyleColor = "#ccc",
styleRules = document.createTextNode("." + placeholderClassName + " { color:" + placeholderStyleColor + "; }");
to
placeholderStyleColor = "#B8B8B8",
styleRules = document.createTextNode("." + placeholderClassName + " { color:" + placeholderStyleColor + "!important" + "; }");
then In Texbox field' placeholder color is now #B8B8B8.
But Problem is :
B8B8B8 color is applied on both textbox placeholder and value because I added !important to color style.
I want to do is B8B8B8 color need to apply to placeholder only.

Place holder Support though java script
var _debug = false;
var _placeholderSupport = function() {
var t = document.createElement("input");
t.type = "text";
return (typeof t.placeholder !== "undefined");
}();
window.onload = function() {
var arrInputs = document.getElementsByTagName("input");
var arrTextareas = document.getElementsByTagName("textarea");
var combinedArray = [];
for (var i = 0; i < arrInputs.length; i++)
combinedArray.push(arrInputs[i]);
for (var i = 0; i < arrTextareas.length; i++)
combinedArray.push(arrTextareas[i]);
for (var i = 0; i < combinedArray.length; i++) {
var curInput = combinedArray[i];
if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea")
HandlePlaceholder(curInput);
else if (curInput.type == "password")
ReplaceWithText(curInput);
}
if (!_placeholderSupport) {
for (var i = 0; i < document.forms.length; i++) {
var oForm = document.forms[i];
if (oForm.attachEvent) {
oForm.attachEvent("onsubmit", function() {
PlaceholderFormSubmit(oForm);
});
}
else if (oForm.addEventListener)
oForm.addEventListener("submit", function() {
PlaceholderFormSubmit(oForm);
}, false);
}
}
};
function PlaceholderFormSubmit(oForm) {
for (var i = 0; i < oForm.elements.length; i++) {
var curElement = oForm.elements[i];
HandlePlaceholderItemSubmit(curElement);
}
}
function HandlePlaceholderItemSubmit(element) {
if (element.name) {
var curPlaceholder = element.getAttribute("placeholder");
if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) {
element.value = "";
window.setTimeout(function() {
element.value = curPlaceholder;
}, 100);
}
}
}
function ReplaceWithText(oPasswordTextbox) {
if (_placeholderSupport)
return;
var oTextbox = document.createElement("input");
oTextbox.type = "text";
oTextbox.id = oPasswordTextbox.id;
oTextbox.name = oPasswordTextbox.name;
//oTextbox.style = oPasswordTextbox.style;
oTextbox.className = oPasswordTextbox.className;
for (var i = 0; i < oPasswordTextbox.attributes.length; i++) {
var curName = oPasswordTextbox.attributes.item(i).nodeName;
var curValue = oPasswordTextbox.attributes.item(i).nodeValue;
if (curName !== "type" && curName !== "name") {
oTextbox.setAttribute(curName, curValue);
}
}
oTextbox.originalTextbox = oPasswordTextbox;
oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox);
HandlePlaceholder(oTextbox);
if (!_placeholderSupport) {
oPasswordTextbox.onblur = function() {
if (this.dummyTextbox && this.value.length === 0) {
this.parentNode.replaceChild(this.dummyTextbox, this);
}
};
}
}
function HandlePlaceholder(oTextbox) {
if (!_placeholderSupport) {
//alert(oTextbox.tagName);
var curPlaceholder = oTextbox.getAttribute("placeholder");
if (curPlaceholder && curPlaceholder.length > 0) {
Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
oTextbox.value = curPlaceholder;
oTextbox.setAttribute("old_color", oTextbox.style.color);
oTextbox.style.color = "#c0c0c0";
oTextbox.onfocus = function() {
var _this = this;
if (this.originalTextbox) {
_this = this.originalTextbox;
_this.dummyTextbox = this;
this.parentNode.replaceChild(this.originalTextbox, this);
_this.focus();
}
Debug("input box '" + _this.name + "' focus");
_this.style.color = _this.getAttribute("old_color");
if (_this.value === curPlaceholder)
_this.value = "";
};
oTextbox.onblur = function() {
var _this = this;
Debug("input box '" + _this.name + "' blur");
if (_this.value === "") {
_this.style.color = "#c0c0c0";
_this.value = curPlaceholder;
}
};
}
else {
Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
}
}
else {
Debug("browser has native support for placeholder");
}
}
function Debug(msg) {
if (typeof _debug !== "undefined" && _debug) {
var oConsole = document.getElementById("Console");
if (!oConsole) {
oConsole = document.createElement("div");
oConsole.id = "Console";
document.body.appendChild(oConsole);
}
oConsole.innerHTML += msg + "<br />";
}
}
Css for input color
.mypassword { background-color: lightgreen; }
input[type="text"]:focus {
color: red;
}
DemoFiddle