Develop Reference

My form isn't showing the error message correctly

I built an online form and published it here --> https://www.worthit.cc/
It has a built-in error that's suppose to fire whenever the submit button is clicked and any of the fields are empty. However, it doesn't always show like it's supposed to.
Here's the link to the full code on GitHub: https://github.com/ZacharyFoxLuke/Worth-It
And here's the JS in question:
$modal = $('.modal-frame')
$modal_Rewards_Info = $('#inputFields #rewards-info-message')
$modal_Transaction_Fee = $('#inputFields #transactionFee-info-message')
$modal_Profit = $('#profit-message')
$modal_Loss = $('#loss-message')
$modal_BreakEven = $('#break-even-message')
$modal_Error = $('#error-message')
$modal_About = $('#about-message')
$modal_Contact = $('#contact-message')
$submitButton = $('#submitButton')
$dollarsProfit = $('.dollarsProfit')
$dollarsFee = $('.dollarsFee')
$dollarsNet = $('.dollarsNet')
$submitButton.click(function () {
const purchaseAmount = document.getElementById('purchaseAmountInput').value
const rewardsRate = document.getElementById('rewardsRateInput').value / 100
const transactionFeeInput = document.getElementById('variFeeInput').value / 100
const transactionFeeNet = purchaseAmount * transactionFeeInput
const earnedRewards = purchaseAmount * rewardsRate
if (purchaseAmount === '' || rewardsRate === '' || transactionFeeInput === '') {
$modal_Error.toggleClass('active')
$modal_Error.removeClass('leave')
} else if (rewardsRate === transactionFeeInput && rewardsRate !== '' && transactionFeeInput !== '' && purchaseAmount !== '') {
$modal_BreakEven.toggleClass('active')
$modal_BreakEven.removeClass('leave')
$dollarsProfit.html(rewardsRate * purchaseAmount)
$dollarsFee.html(transactionFeeNet)
} else if (rewardsRate < transactionFeeInput && rewardsRate !== '' && transactionFeeInput !== '' && purchaseAmount !== '') {
$modal_Loss.toggleClass('active')
$modal_Loss.removeClass('leave')
$dollarsProfit.html(rewardsRate * purchaseAmount)
$dollarsFee.html(transactionFeeNet)
$dollarsNet.html(earnedRewards - transactionFeeNet)
} else if (rewardsRate > transactionFeeInput && rewardsRate !== '' && transactionFeeInput !== '' && purchaseAmount !== '') {
$modal_Profit.toggleClass('active')
$modal_Profit.removeClass('leave')
$dollarsProfit.html(rewardsRate * purchaseAmount)
$dollarsFee.html(transactionFeeNet)
$dollarsNet.html(earnedRewards - transactionFeeNet)
}
})

you may add a function to check whether the amount is actually a valid amount and manipulate your code a little more using this function.
checkTheAmount = (item) => {
if (item && parseFloat(item) > 0) return true;
return false;
};
checkTheAmount = (item) => {
if (item && parseFloat(item) > 0) return True;
return False;
};
$submitButton.click(function () {
const purchaseAmount = document.getElementById("purchaseAmountInput").value;
const rewardsRate = document.getElementById("rewardsRateInput").value / 100;
const transactionFeeInput =
document.getElementById("variFeeInput").value / 100;
const transactionFeeNet = purchaseAmount * transactionFeeInput;
const earnedRewards = purchaseAmount * rewardsRate;
if (
checkTheAmount(purchaseAmount) == false ||
checkTheAmount(rewardsRate) == false ||
checkTheAmount(transactionFeeInput) == false
) {
$modal_Error.toggleClass("active");
$modal_Error.removeClass("leave");
} else if (
rewardsRate === transactionFeeInput &&
rewardsRate !== "" &&
transactionFeeInput !== "" &&
purchaseAmount !== ""
) {
$modal_BreakEven.toggleClass("active");
$modal_BreakEven.removeClass("leave");
$dollarsProfit.html(rewardsRate * purchaseAmount);
$dollarsFee.html(transactionFeeNet);
} else if (
rewardsRate < transactionFeeInput &&
rewardsRate !== "" &&
transactionFeeInput !== "" &&
purchaseAmount !== ""
) {
$modal_Loss.toggleClass("active");
$modal_Loss.removeClass("leave");
$dollarsProfit.html(rewardsRate * purchaseAmount);
$dollarsFee.html(transactionFeeNet);
$dollarsNet.html(earnedRewards - transactionFeeNet);
} else if (
rewardsRate > transactionFeeInput &&
rewardsRate !== "" &&
transactionFeeInput !== "" &&
purchaseAmount !== ""
) {
$modal_Profit.toggleClass("active");
$modal_Profit.removeClass("leave");
$dollarsProfit.html(rewardsRate * purchaseAmount);
$dollarsFee.html(transactionFeeNet);
$dollarsNet.html(earnedRewards - transactionFeeNet);
}
});

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);
}

Alternatives to IF statement with multiple OR

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)
)

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 :)