why if condation not update the component - javascript

I did that code, but the table doesn't work according to the conditions.
mobilScreen: boolean = false;
pcScreen: boolean = false;
get mobilScreen() {
if (window.matchMedia("(max-width: 500px)").matches) {
return true;
} else {
return false;
}
}
get pcScreen() {
if ((this.mobilScreen)) {
return false;
} else {
return true;
}
}
I tried using forceUpdate() but it didn't work.

Related

How to check if 2 strings are equal in JavaScript?

I'm a beginner in JS and trying to sort some cars by their model. The models are sorted by ranking in this order (Mercedes, BMW, Jeep, Nissan). I would like it to be case-insensitive. I went about it by creating a variable for creating the desired rankings.
var modelRanking = function(car) {
if (car.model.toLowerCase() === 'mercedes') {
return 1;
} else if (car.model.toLowerCase() === 'bmw') {
return 2;
} else if (car.model.toLowerCase() === 'jeep') {
return 3;
} else if (car.model.toLowerCase() === 'nissan') {
return 4;
} else {
return 5;
}
}
function modelComparator(car1, car2) {
if (car1.modelRanking < car2.modelRanking) {
return true;
} else if (car1.modelRanking > car2.modelRanking) {
return false;
} else if (car1.modelRanking == car2.modelRanking) {
return yearComparator(car1, car2);
}
}
However the modelRanking is always returning 5.
Instead of car1.modelRanking, use modelRanking(car1) because modelRanking is a function in global scope, not a property of car1.
function modelComparator(car1, car2) {
if (modelRanking(car1) < modelRanking(car2)) {
return true;
} else if (modelRanking(car1) > modelRanking(car2)) {
return false;
} else if (modelRanking(car1) == modelRanking(car2)) {
return yearComparator(car1, car2);
}
}

parameter.includes() is not a function

I'm pretty new at js programming. I'm developing an admission form as part of our project to be submitted. It's also my first time asking a question here.
I'm creating a form of validation to prevent any invalid values to be entered. I also need some optimizations at my code. If you have any suggestions to make it shorter, I'll be glad to accept your suggestion too.
I tried executing the matchCheck() function on other scenarios, but it just works fine. I also tried executing validateDate() on the console and other scenarios, but it also worked without any errors. I got an error when the functions are executed at if statements.
Here is the error message: Unknown TypeError: arrayToBeChecked.includes is not a function
I got an error at these function and if statements:
function matchCheck(arrayToBeChecked, findingValue) {
return arrayToBeChecked.includes(findingValue);
}
if (matchCheck(date[0], "null") === false)
if (validateDate(bdate) === true)
Here is the code (Excluded some of the unrelated variables and codes):
//Check Match
function matchCheck(arrayToBeChecked, findingValue) {
return arrayToBeChecked.includes(findingValue);
}
//Date Validator
//Expected Format [MM/DD/YYYY]
function validateDate(date) {
//check if the date is valid
var leapYear = date[2] % 4;
var mos31 = ["1", "3", "5", "7", "8", "10", "12"];
var mos30 = ["4", "6", "9", "11"];
var flyInv = ["30", "31"];
var fnlyInv = ["29", "30", "31"];
var mos30Inv = "31";
if (matchCheck(date[0], "null") === false) {
if (matchCheck(date[1], "null") === false) {
if (matchCheck(date[2], "null") === false) {
if (leapYear == 0) {
if (date[0] == "2") {
if (matchCheck(flyInv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else if (matchCheck(mos31, date[0]) === true) {
return true;
}
else if (matchCheck(mos30, date[0]) === true) {
if (matchCheck(mos30Inv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else {
return false
}
}
else {
if (date[0] == "2") {
if (matchCheck(fnlyInv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else if (matchCheck(mos31, date[0]) === true) {
return true;
}
else if (matchCheck(mos30, date[0]) === true) {
if (matchCheck(mos30Inv, date[1]) === false) {
return true;
}
else {
return false;
}
}
else {
return false;
}
}
}
else {
return false;
}
}
else {
return false;
}
}
else {
return false;
}
}
//Contact Number Validator
//Expected Format [09XXXXXXXXX]
function cnValid(nos) {
if (nos.value.length === 11) {
if(nos.indexOf("09") > -1) {
return true;
}
else {
return false;
}
}
else {
return false;
}
}
//Check for empty selects
function checkEmptySelects(el) {
var selects = document.querySelectorAll(el);
var i;
for (i = 0; i < selects.length; i++) {
if (selects[i].value == "0") {
return true;
}
else {
return false;
}
}
}
//Valid Relation Values
var vrv = ["mother", "father", "grandmother", "grandfather", "auntie", "uncle", "housemaid", "Mother", "Father", "Grandmother", "Grandfather", "Auntie", "Uncle", "Housemaid", "Aunt", "aunt", "brother", "Brother", "sister", "Sister", "cousin", "Cousin"];
//Start Review
function reviewForm() {
var letters = /^[a-zA-Z\s]*$/;
var mailFormat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var noScFormat = /[^a-zA-Z0-9\\,\\.\s]/g;
//Perform Checks
if (checkEmptySelects("select") === false) {
if (ln.value.match(letters)) {
if (fn.value.match(letters)) {
if (mn.value.match(letters)) {
if (eml.value.match(mailFormat)) {
if (age.value >= 0) {
if (age.value <= 100) {
if (validateDate(bdate) === true) {
if (pob.value.match(noScFormat)) {
if (ca.value.match(noScFormat)) {
if (rlg.value.match(letters)) {
if (nsl.value.match(letters)) {
if (cmn.value.match(letters)) {
if (mo.value.match(letters)) {
if (cfn.value.match(letters)) {
if (fo.value.match(letters)) {
if (gn.value.match(letters)) {
if (matchCheck(vrv, rts) === true) {
if (cnValid(cn) === true) {
if (lrn.value.length === 12) {
//Submit Data to db if all of the requirements are passed.
}
else {
//Error Message;
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
else {
//Error Message
}
}
The error occurs when the "arrayToBeChecked" value that is passed to the "matchCheck()" function is not an arry. To fix this, you could convert "arrayToBeChecked" to an array if it's not already an array.
function matchCheck(arrayToBeChecked, findingValue) {
// Convert arrayToBeChecked to an array if it's not already an array
if (!Array.isArray(arrayToBeChecked)) {
arrayToBeChecked = [arrayToBeChecked];
}
return arrayToBeChecked.includes(findingValue);
}

specific page redirect to corresponding mobile page not working

I have the following code that works with other circumstances but is giving me problems I guess due to the window.locaton. Please help I need to redirect users to specific mobile pages depending on the desktop page.
function mon() {
if ($('body').is('.mon')) {
return true;
} else {
return false;
}
}
function tue() {
if ($('body').is('.tue')) {
return true;
} else {
return false;
}
}
function wed() {
if ($('body').is('.wed')) {
return true;
} else {
return false;
}
}
function detectmob() {
if (screen.width <= 800) {
return true;
} else {
return false;
}
}
if (detectmob() && mon()) {
window.location = "../m/days/mon.html";
} else if (detectmob() && tue()) {
window.location = "../m/days/tue.html";
} else if (detectmob() && wed()) {
window.location = "../m/days/wed.html";
}
It was my mistake
<body class="mon">
<script src="jquip.min.js"></script><!--increase load time instead of jquery.min-->
<script>
function mon() {
if ($('body').is('.mon')) {
return true;
} else {
return false;
}
}
function tue() {
if ($('body').is('.tue')) {
return true;
} else {
return false;
}
}
function wed() {
if ($('body').is('.wed')) {
return true;
} else {
return false;
}
}
function detectmob() {
if (screen.width <= 800) {
return true;
} else {
return false;
}
}
if (detectmob() && mon()) {
window.location = "../m/days/mon.html";
} else if (detectmob() && tue()) {
window.location = "../m/days/tue.html";
} else if (detectmob() && wed()) {
window.location = "../m/days/wed.html";
}
</script>
working fine

Javascript: multi-tiered conditional, use of "return false" stopping later conditional checks

Return false isn't doing quite what I want it to do. I want it to prevent the form submit if any one of the conditionals passes, but I still want it to proceed down the tree of conditionals. Right now if the first conditional if ($(".item.active").length == 0) { passes, it hits the return false; and stops the later conditionals from checking.
How can I rewrite this to work better?
$('#go').click(function() {
function invalidBtn(){
$('#go').addClass('invalid');
setTimeout(function() {
$('#go').removeClass('invalid');
}, 5000)
}
$('.error').remove();
$('.invalid').removeClass('invalid');
if ($(".item.active").length == 0) {
$(".item:first-of-type").before('<h5 class="error">Select a shirt type</h5>');
invalidBtn();
return false;
} else {
if ( $(".item.active .size-select .active").length == 0) {
$('.item.active .size-select').before("<div class='error'>Select a size</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
return false;
}
if ($(".item.active .gender-select").length > 0 ) {
if ( $(".item.active .gender-select .active").length == 0 ){
$('.item.active .gender-select').before("<div class='error'>Select a gender</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
return false;
}
}
}
if ( !$('#fn-field').val() ) {
$('#fn-field').before("<div class='error'>Enter your first name</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
return false;
}
if ( !$('#ln-field').val() ) {
$('#ln-field').before("<div class='error'>Enter your last name</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
return false;
}
});
Thanks so much
Simply replace all of your return false to change a boolean, and return the boolean, like this:
$('#go').click(function() {
function invalidBtn(){
$('#go').addClass('invalid');
setTimeout(function() {
$('#go').removeClass('invalid');
}, 5000)
}
var retVal = true;
$('.error').remove();
$('.invalid').removeClass('invalid');
if ($(".item.active").length == 0) {
$(".item:first-of-type").before('<h5 class="error">Select a shirt type</h5>');
invalidBtn();
retVal = false;
} else {
if ( $(".item.active .size-select .active").length == 0) {
$('.item.active .size-select').before("<div class='error'>Select a size</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
retVal = false;
}
if ($(".item.active .gender-select").length > 0 ) {
if ( $(".item.active .gender-select .active").length == 0 ){
$('.item.active .gender-select').before("<div class='error'>Select a gender</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
retVal = false;
}
}
}
if ( !$('#fn-field').val() ) {
$('#fn-field').before("<div class='error'>Enter your first name</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
retVal = false;
}
if ( !$('#ln-field').val() ) {
$('#ln-field').before("<div class='error'>Enter your last name</div>").addClass("invalid");
//$(this).addClass('invalid');
invalidBtn();
retVal = false;
}
return retVal;
});
Return false isn't doing quite what I want it to do. I want it to prevent the form submit if any one of the conditionals passes, but I still want it to proceed down the tree of conditionals. Right now if the first conditional if ($(".item.active").length == 0) { passes, it hits the return false; and stops the later conditionals from checking.
Right, because return exits the function.
If you want to keep going through the code following it, don't use return, set a variable you return at the end. E.g.:
var valid = true;
if (someInvalidCondition) {
// ...do anyting condition-specific...
valid = false;
}
if (someOtherInvalidCondition) {
// ...do anyting condition-specific...
valid = false;
}
// Rinse, repeat
// Done
return valid;
Or I usually like to return a count of the errors. Or a list (array) of the errors. Etc.

Ensuring date can be added in past

What can I do to this piece of code to ensure that it can allow absences to be added in the past as well as the future? Whenever I attempt to add anything in the past, it is appears to want to still give me the error that I cannot add an absence in the past. I'm not even sure how to code to ensure it can, or which bit to delete. I'm aware there is a bit of code that is not allowing me to, but I'm not sure which bit and what to delete. I am not extremely skilled at JavaScript but it is in my project and I am unsure what to do with it.
dateValid: function () {
var s = $(this).val();
if ($(this).required()) {
var date = new Date(s);
if (!isNaN(date)) {
if (date >= Date.parse(new Date().toDateString())) {
$(this).removeClass("error");
return true;
}
else {
validation.showError("Past", $(this).attr("name"));
$(this).addClass("error");
return false;
}
}
else {
validation.showError("Invalid", $(this).attr("name"));
$(this).addClass("error");
return false;
}
}
else return false;
},
dateRangeValid: function (toDate) {
var s = $(this).val();
if ($(this).required()) {
if (toDate.required()) {
var dateFrom = new Date(s);
var dateTo = new Date(toDate.val());
if (!isNaN(dateFrom) && !isNaN(dateTo)) {
if (dateTo >= dateFrom) {
if (dateFrom >= Date.parse(new Date().toDateString())) {
$(this).removeClass("error");
toDate.removeClass("error");
return true;
}
else {
validation.showError("Past", "date");
$(this).addClass("error");
toDate.addClass("error");
return false;
}
}
else {
validation.showError("Invalid", "date");
$(this).addClass("error");
toDate.addClass("error");
return false;
}
}
else {
validation.showError("Invalid", "date");
$(this).addClass("error");
toDate.addClass("error");
return false;
}
}
else {
validation.showError("Required", "dateTo");
$(this).addClass("error");
toDate.addClass("error");
return false;
}
}
else {
validation.showError("Required", "dateFrom");
$(this).addClass("error");
toDate.addClass("error");
return false;
}
},
Here's your error:
if (dateTo >= dateFrom) {
// This if statement checks if dateFrom is today or later!!
if (dateFrom >= Date.parse(new Date().toDateString())) {
$(this).removeClass("error");
toDate.removeClass("error");
return true;
}
else {
validation.showError("Past", "date");
$(this).addClass("error");
toDate.addClass("error");
return false;
}
}
Replace with
if (dateTo >= dateFrom) {
$(this).removeClass("error");
toDate.removeClass("error");
return true;
}
and there should no longer be a problem.

Categories

Resources