Alternatives to IF statement with multiple OR - javascript

I have a HTML form with a file upload option where I do a quick validation of the file format on client side (in order to allow only certain file extensions).
The following code snippet works fine for me but I was wondering if there is a better or faster way to achieve the same, esp. if there are more extensions to be allowed in the future.
Note: This is only about the part with the multiple OR statements to check the file extension.
My code so far (working):
if( ( (fileNameShort.length <= 100) && (fileNameShort.indexOf('#') == -1) ) && ( (fileFormat == 'bmp') || (fileFormat == 'doc') || (fileFormat == 'docx') || (fileFormat == 'gif') || (fileFormat == 'jpeg') || (fileFormat == 'jpg') || (fileFormat == 'msg') || (fileFormat == 'png') || (fileFormat == 'pdf') ) )
Many thanks for any suggestions on this, Tim.

Use .indexOf()
and also use .toLowerCase() as checking for lowercase file formats
var arr=['bmp','doc','docx','gif','jpg','msg']; //create array filetypes
if(fileNameShort.length <= 100 && fileNameShort.indexOf('#') === -1 && arr.indexOf(fileFormat.toLowerCase()) !== -1)

You are using way too may parentheses.
if (
(
( fileNameShort.length <= 100 )
&& ( fileNameShort.indexOf('#') == -1 )
)
&&
(
(fileFormat == 'bmp') || (fileFormat == 'doc') || (fileFormat == 'docx') || (fileFormat == 'gif') || (fileFormat == 'jpeg') || (fileFormat == 'jpg') || (fileFormat == 'msg') || (fileFormat == 'png') || (fileFormat == 'pdf')
)
)
is equivalent to
if (
fileNameShort.length <= 100
&& fileNameShort.indexOf('#') == -1
&& (
fileFormat == 'bmp' || fileFormat == 'doc' || fileFormat == 'docx' || fileFormat == 'gif' || fileFormat == 'jpeg' || fileFormat == 'jpg' || fileFormat == 'msg' || fileFormat == 'png' || fileFormat == 'pdf'
)
)
is equivalent to
if (
fileNameShort.length <= 100
&& fileNameShort.indexOf('#') == -1
&& /^(bmp|docx?|gif|jpe?g|msg|png|pdf)$/i.test(fileFormat)
)

Related

Multiple IF conditions inside filter

I want to filter a table (2d array) together with IF condition (depending on HTML select value) and use this code
transportRegFiltered = transportReg.filter(r =>
{if(lugarDe.value == "TODOS"){return true} else {return (r[6] == lugarDe.value)}
})
with 1 condition it works but I need to have several ones. Smth like
transportRegFiltered = transportReg.filter(r =>
{if(lugarDe.value == "TODOS"){return true} else {return (r[6] == lugarDe.value)}
if(lugarA.value == "TODOS"){return true} else {return (r[7] == lugarA.value)}
}
How can I do it?
You can return all the condition using OR operator. Because
if(A) { return true; } else { return B; }
if(C) { return true; } else { return D; }
Translates to
return A || B || C || D;
So you can write something like this inside the filter,
return ( lugarDe.value == "TODOS" || r[6] == lugarDe.value || lugarA.value == "TODOS" || r[7] == lugarA.value ... and all the other conditions );
I am not really clear what you want the if statements to do exactly, but one stab at it would be check the values and then checking the other conditions with ORs.
var isTodos = [lugarDe.value, lugarA.value].includes("TODOS");
return isTodos || r[6] == lugarDe.value || r[7] == lugarA.value;
Are you trying to apply each filter independently if the condition for that filter is taken? In that case you can cascade the filters:
transportRegFiltered = transportReg
.filter((r) => {
if (lugarDe.value == "TODOS") {
return true;
} else {
return r[6] == lugarDe.value;
}
})
.filter((r) => {
if (lugarA.value == "TODOS") {
return true;
} else {
return r[7] == lugarA.value;
}
});
You could take an array for checking the values.
transportRegFiltered = transportReg.filter(r => {
const values = [lugarDe.value, lugarA.value];
return values.includes("TODOS") || values.some((v, i) => v === r[i + 6]);
});
ok I did it in most simple and direct way. Just wanted to find some fancy one...
I just looped through all options of 3 inputs and assigned different filters for each combination including or excluding relevant filter condition
var transportRegFiltered;
if(lugarDe.value == "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length == 0){
transportRegFiltered = transportReg}
else if (lugarDe.value == "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}
else if (lugarDe.value !== "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length == 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value)}
else if (lugarDe.value == "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length == 0) {
transportRegFiltered = transportReg.filter(r => r[7] == lugarA.value)}
else if (lugarDe.value !== "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length == 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value && r[7] == lugarA.value)}
else if (lugarDe.value !== "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value && (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}
else if (lugarDe.value == "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => r[7] == lugarA.value && (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}
else if (lugarDe.value !== "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value && r[7] == lugarA.value && (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}

tic tac toe game not working (javascript) [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working on a tic tac toe game, and I am at the point where the game decides who wins the game. I wrote the logic and all possible winner solutions, but when I play the game, the game announces a winner even when there is no winning combination. What did I do wrong? This is the code pen:
https://codepen.io/xshirl/pen/dmzeMd
Here is my code:
let player = true;
$(document).ready(function () {
const square = $('.square');
function display() {
if (player === true) {
square.on('click', first);
} else if (player === false) {
square.on('click', function () {
$(this).addClass('second');
});
}
}
display();
function first() {
$(this).addClass('first');
player = !player;
if (player === true) {
$(this).addClass('second');
alert("Player 2 has made a move.")
} else {
alert("Player 1 has made a move.")
}
if (($(".one").hasClass('first') && $(".two").hasClass('first') && $(".three").hasClass('first')) || ($(".four").hasClass('first') && $(".five").hasClass('first') && $(".six").hasClass('first')) || ($(".seven").hasClass('first') && $(".eight").hasClass('first') && $(".nine").hasClass('first')) ||
($(".one").hasClass('first') && $(".four").hasClass('first') && $(".seven").hasClass('first')) || ($(".two").hasClass('first') && $(".five").hasClass('first') && $(".eight").hasClass('first')) || ($(".three").hasClass('first') && $(".six").hasClass('first') && $(".nine").hasClass('first')) ||
($(".one").hasClass('first') && $(".five").hasClass('first') && $(".nine").hasClass('first')) || ($(".three").hasClass('first') && $(".five").hasClass('first') && $(".seven").hasClass('first'))) {
alert("Player 1 has won the game!");
}
if ($(".one").hasClass('second') && $(".two").hasClass('second') && $(".three").hasClass('second') || $(".four").hasClass('second') && $(".five").hasClass('second') && $(".six").hasClass('second') || $(".seven").hasClass('second') && $(".eight").hasClass('second') && $(".nine").hasClass('second') ||
$(".one").hasClass('second') && $(".four").hasClass('second') && $(".seven").hasClass('second') || $(".two").hasClass('second') && $(".five").hasClass('second') && $(".eight").hasClass('second') || $(".three").hasClass('second') && $(".six").hasClass('second') && $(".nine").hasClass('second') ||
$(".one").hasClass('second') && $(".five").hasClass('second') && $(".nine").hasClass('second') || $(".three").hasClass('second') && $(".five").hasClass('second') && $(".seven").hasClass('second')) {
alert("Player 2 has won the game!");
}
}
});
In function first, move the line $(this).addClass('first'); to the else block. So the code will be:
function first() {
player = !player;
if (player === true) {
$(this).addClass('second');
alert("Player 2 has made a move.")
} else {
$(this).addClass('first');
alert("Player 1 has made a move.")
}
if (($(".one").hasClass('first') && $(".two").hasClass('first') && $(".three").hasClass('first')) || ($(".four").hasClass('first') && $(".five").hasClass('first') && $(".six").hasClass('first')) || ($(".seven").hasClass('first') && $(".eight").hasClass('first') && $(".nine").hasClass('first')) ||
($(".one").hasClass('first') && $(".four").hasClass('first') && $(".seven").hasClass('first')) || ($(".two").hasClass('first') && $(".five").hasClass('first') && $(".eight").hasClass('first')) || ($(".three").hasClass('first') && $(".six").hasClass('first') && $(".nine").hasClass('first')) ||
($(".one").hasClass('first') && $(".five").hasClass('first') && $(".nine").hasClass('first')) || ($(".three").hasClass('first') && $(".five").hasClass('first') && $(".seven").hasClass('first'))) {
alert("Player 1 has won the game!");
}
if ($(".one").hasClass('second') && $(".two").hasClass('second') && $(".three").hasClass('second') || $(".four").hasClass('second') && $(".five").hasClass('second') && $(".six").hasClass('second') || $(".seven").hasClass('second') && $(".eight").hasClass('second') && $(".nine").hasClass('second') ||
$(".one").hasClass('second') && $(".four").hasClass('second') && $(".seven").hasClass('second') || $(".two").hasClass('second') && $(".five").hasClass('second') && $(".eight").hasClass('second') || $(".three").hasClass('second') && $(".six").hasClass('second') && $(".nine").hasClass('second') ||
$(".one").hasClass('second') && $(".five").hasClass('second') && $(".nine").hasClass('second') || $(".three").hasClass('second') && $(".five").hasClass('second') && $(".seven").hasClass('second')) {
alert("Player 2 has won the game!");
}
}
});

Complex If statements; || not working as I hoped

I feel like this is a really dumb question but my brain is fried. Right now I'm working on a very complex set of if and else statements and I'm wondering if there is an easier way? I originally tried or statements but that didn't give me the desired result.
if(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && fields[3].value === '' ) {
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === city && fields[2].value === '' && fields[3].value === '') {
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && fields[3].value === '') {
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && fields[2].value === '' && fields[3].value === ''){
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === '' && (fields[2].value <= sq && sq != null) && fields[3].value === '') {
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)) {
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === ''){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === ''){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && fields[2].value === '' && (fields[3].value >= sq && sq != null)){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && (fields[3].value >= sq && sq != null)){
clusterGroup.addLayer(layer);
}
Thank you in advanced.
I don't know how did you use OR Statement (||) but you can use one if statement.
if(
(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === '' && fields[1].value === city && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === city && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === '' && fields[1].value === '' && (fields[2].value <= sq && sq != null) && fields[3].value === '') ||
(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)) ||
(fields[0].value === '' && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)) ||
(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === city && fields[2].value === '' && (fields[3].value >= sq && sq != null)) ||
(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && (fields[3].value >= sq && sq != null))
){
clusterGroup.addLayer(layer);
}
Try restructuring it into something like this
if (sq != null) {
if (fields[3].value >= sq &&
fields[2].value <= sq &&
fields[0].value === state &&
field[1].value === city) {
clusterGroup.addLayer(layer);
} else if (fields[3].value >= sq) {
if ((fields[0].value === state) ||
(fields[0].value === state && field[1].value === city) ||
(fields[0].value === '' &&
field[1].value === '')) {
clusterGroup.addLayer(layer);
}
} else if (fields[2].value <= sq) {
if ((fields[1].value === city) ||
(fields[0].value === state && field[1].value === city) ||
(fields[0].value === '' && field[1].value === '')) {
clusterGroup.addLayer(layer);
}
}
} else if ((fields[1].value === '' && fields[0].value === state) ||
(fields[0].value === '' && fields[1].value === city) ||
(fields[0].value === state && fields[1].value === city)) {
clusterGroup.addLayer(layer);
}

Firefox back button behaviour on single page application

I'm working on SSO page, In there there is function that navigated to another domain single page application which uses angularjs. If users decide to go back, Firefox back button, doesn't navigating to that page.
This should get you started... I disable them in my app, but once they're trapped, you can do with the keypresses what you will.
$(document).ready(function(e) {
// Stop enter/backspace doing their browser defaults.
if (typeof window.event != 'undefined') { // IE
document.onkeydown = function() {
var t=event.srcElement.type;
var kc=event.keyCode;
return ((kc != 8 && kc != 13) || ( t == 'text' && kc != 13 ) || (t == 'textarea') || ( t == 'password' ) || ( t == 'search' ) || ( t == 'submit' && kc == 13));
}
} else {
document.onkeypress = function(e) { // FireFox/Others
var kc=e.keyCode;
if ((kc != 8 && kc != 13) || ( t == 'text' && kc != 13 ) || (t == 'textarea') || ( t == 'password' ) || ( t == 'search' ) || ( t == 'submit' && kc == 13)) {
return true;
} else {
alert('Sorry Backspace/Enter is not allowed here'); // Demo code
return false;
}
}
}
});

JavaScript conditions

If someone could point out what I'm doing wrong I'd be eternally grateful! I can't seem to get the right combination of parenthesis - how to I combine multiple conditions in one statement?? Obviously I don't expect anyone to modify the code below, I just want to show what I'm trying to achieve.
If someone can explain the logic to me that'd be great
Thanks
function ChangeButton()
{
if
((document.forms[0].IPR.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].SURN.value == "") && (document.forms[0].GEND.value == "") && (document.forms[0].DOB.value == "") && (document.forms[0].CRIM.value == "") && (document.forms[0].ETHC.value == "") && (document.forms[0].DSBC.value == "") && (document.forms[0].MARK1.value == "") && (document.forms[0].NATC.value == "") && (document.forms[0].COBC.value == "") && (document.forms[0].COD.value == "") && (document.forms[0].FIVE.value == "") && (document.forms[0].PERM.value == "") && (document.forms[0].VISF.value == "") && (document.forms[0].USD.value == "") && (document.forms[0].HAD1.value == "") && (document.forms[0].HAD3.value == "") && (document.forms[0].HTEL.value == "") && (document.forms[0].HAEM.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].REF1TIT.value == "") && (document.forms[0].REF1ORG.value == "") && (document.forms[0].REF1POS.value == "") && (document.forms[0].REF1AL1.value == "") && (document.forms[0].REF1AL3.value == "") && (document.forms[0].REF1AL5.value == "") && (document.forms[0].REF1EMA.value == "") && (document.forms[0].DISC.value == ""))
&&
((document.forms[0].PERM.value == "") && (document.forms[0].FIVE.value == "N"))
&&
((document.forms[0].AGNT.value == "") && (document.forms[0].USD.value == "Y"))
&&
((document.forms[0].CSTRT.value == "") && (document.forms[0].USD.value == "N") && (document.forms[0].CENDD.value == "") && (document.forms[0].CAD1.value == "") && (document.forms[0].CAD3.value == "") && (document.forms[0].CAD4.value == "") && (document.forms[0].CAPC.value == "") && (document.forms[0].CTEL.value == ""))
&&
((document.forms[0].AWDB.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].FEES.value == "Private Funds Self or Family") && (document.forms[0].AWDS.value == ""))
&&
((document.forms[0].RESEARCH.value == "Y") && (document.forms[0].RESSRT.value == "") && (document.forms[0].RESMOA.value == "") && (document.forms[0].RESAR.value == "") && (document.forms[0].RESDIS.value == ""))
{
document.getElementById('submitbutton').className = 'enabled';
}
else {
document.getElementById('submitbutton').className = 'disabled';
}
}
I see
...&&... document.forms[0].FIVE.value == ""
...&&... document.forms[0].FIVE.value == "N"
This never be true
EDIT
I think you must change approach, try something like this:
function ChangeButton()
{
var frm = document.forms[0];
var neverEmpty = ['field1','field2','field3'];
var mustBe = {field3:'Y', field4:'N'};
var status = 'ok';
for(var i = 0; i<neverEmpty.length; i++) {
if(frm[neverEmpty[i]] == '') {
status = 'ko';
break;
}
}
for(myField in mustBe) {
if(frm[myfield] != mustBe[myField]) {
status = 'ko';
break;
}
}
document.getElementById('submitbutton').className = status=='ok'? 'enabled' : 'disabled';
}
you don't close the brackets
if (document.forms[0].IPR.value == "" && document.forms[0].FNM1.value == "" && ect...)
it's that simple
You need one more set of parentheses around the whole lot i.e. if (a == b) { .. }
As far as I can see, you don't need any parentheses here (except for those that are required by if syntax).
if(document.forms[0].IPR.value == "" && document.forms[0].FNM1.value == "" &&
document.forms[0].PERM.value == "" && document.forms[0].FIVE.value == "N" &&
...
) {
document.getElementById('submitbutton').className = 'enabled';
} else {
document.getElementById('submitbutton').className = 'disabled';
}
Give the input elements that must be non-empty a "class" attribute. Then find all those elements using that instead of writing that insanely ugly code.
You need 1 more paren before and before the first curly brace everything if ( ... ) { ... }
Here is the corrected code.
function ChangeButton()
{
if
((document.forms[0].IPR.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].SURN.value == "") && (document.forms[0].GEND.value == "") && (document.forms[0].DOB.value == "") && (document.forms[0].CRIM.value == "") && (document.forms[0].ETHC.value == "") && (document.forms[0].DSBC.value == "") && (document.forms[0].MARK1.value == "") && (document.forms[0].NATC.value == "") && (document.forms[0].COBC.value == "") && (document.forms[0].COD.value == "") && (document.forms[0].FIVE.value == "") && (document.forms[0].PERM.value == "") && (document.forms[0].VISF.value == "") && (document.forms[0].USD.value == "") && (document.forms[0].HAD1.value == "") && (document.forms[0].HAD3.value == "") && (document.forms[0].HTEL.value == "") && (document.forms[0].HAEM.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].REF1TIT.value == "") && (document.forms[0].REF1ORG.value == "") && (document.forms[0].REF1POS.value == "") && (document.forms[0].REF1AL1.value == "") && (document.forms[0].REF1AL3.value == "") && (document.forms[0].REF1AL5.value == "") && (document.forms[0].REF1EMA.value == "") && (document.forms[0].DISC.value == "")
&&
((document.forms[0].PERM.value == "") && (document.forms[0].FIVE.value == "N"))
&&
((document.forms[0].AGNT.value == "") && (document.forms[0].USD.value == "Y"))
&&
((document.forms[0].CSTRT.value == "") && (document.forms[0].USD.value == "N") && (document.forms[0].CENDD.value == "") && (document.forms[0].CAD1.value == "") && (document.forms[0].CAD3.value == "") && (document.forms[0].CAD4.value == "") && (document.forms[0].CAPC.value == "") && (document.forms[0].CTEL.value == ""))
&&
((document.forms[0].AWDB.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].FEES.value == "Private Funds Self or Family") && (document.forms[0].AWDS.value == ""))
&&
((document.forms[0].RESEARCH.value == "Y") && (document.forms[0].RESSRT.value == "") && (document.forms[0].RESMOA.value == "") && (document.forms[0].RESAR.value == "") && (document.forms[0].RESDIS.value == "")))
{
document.getElementById('submitbutton').className = 'enabled';
}
else {
document.getElementById('submitbutton').className = 'disabled';
}
}
USE and IDE, it will make ur life simple.. Cheers to Eclipse IDE :)

Categories

Resources