CODEWITHSUNDEEP
javascriptjquery
trifesk
trifesk

Reputation: 55

Checking the number in js

I am beginner web developer I have problem with checking numbers in JS.

My code:

function checkValidateForm() {
        let errorWidth = false;
        let errorHeight = false;
        let errorDepth = false;
        if (parseFloat(cupboardMinWidth) <= parseFloat($('.product-size').val()) && parseFloat(cupboardMaxWidth) >= parseFloat($('.product-size').val())) {
            errorWidth = false;
        } else {
            errorWidth = true;
        }

        if (parseFloat(cupboardMinHeight) <= parseFloat($('.product-height').val()) && parseFloat(cupboardMaxHeight) >= parseFloat($('.product-height').val())) {
            errorHeight = false;
        } else {
            errorHeight = true;
        }

        if (parseFloat(cupboardMinDepth) <= parseFloat($('.product-depth').val()) && parseFloat(cupboardMaxDepth) >= parseFloat($('.product-depth').val())) {
            errorDepth = false;
        } else {
            errorDepth = true;
        }

        if ($('.product-size').val() == "" || $('.product-height').val() == "" || $('.product-depth').val() == "" || errorWidth === true || errorHeight === true || errorDepth === true) {
            $('.product-add-to-basket').attr("disabled", true);
            if (errorWidth === true) {
                $('.product-info-box1').html('Wymagana szerokość to: <b>' + cupboardMinWidth + 'cm -' + cupboardMaxWidth + 'cm </b><br/>');
                $('.product-info-box1').fadeIn("slow");
            } else {
                $('.product-info-box1').fadeOut("slow");
            }
            if (errorHeight === true) {
                $('.product-info-box2').html('Wymagana wysokość to: <b>' + cupboardMinHeight + 'cm -' + cupboardMaxHeight + 'cm </b><br/>');
                $('.product-info-box2').fadeIn("slow");
            } else {
                $('.product-info-box2').fadeOut("slow");
            }
            if (errorDepth === true) {
                $('.product-info-box3').html('Wymagana głębokość to: <b>' + cupboardMinDepth + 'cm -' + cupboardMaxDepth + 'cm </b><br/>');
                $('.product-info-box3').fadeIn("slow");
            } else {
                $('.product-info-box3').fadeOut("slow");
            }
            $('.product-info-error-msg').fadeIn("slow");
        } else {
            $('.product-info-error-msg').fadeOut("slow");
            $('.product-info-box1').hide;
            $('.product-info-box2').hide;
            $('.product-info-box3').hide;
            $('.product-add-to-basket').attr("disabled", false);
        }
    }

let productId = 1;

        let cupboardMinWidth = '100.00';


        let cupboardMaxWidth = '250.00';



        let cupboardMinHeight = '100.00';


        let cupboardMaxHeight = '190.00';



        let cupboardMinDepth = '140.00';


        let cupboardMaxDepth = '190.00';

My preview: http://serwer1356363.home.pl/_nauka/

Wymagana szerokość to: 100.00cm -250.00cm - max width

Wymagana wysokość to: 100.00cm -190.00cm -max height

Wymagana głębokość to: 140.00cm -190.00cm - max depth

When I add values to my inputs, e.g. 100.5, 120.5 etc. - the dimensions messages are not always hidden.

Why?

When my dimensions meet the ranges - the message should hide, and this is not always the case

How can I repair it?

Upvotes: 0

Views: 82

Answers (1)

khennouche faycal
khennouche faycal

Reputation: 51

When the $('.product-size') is empty it'll be parsed by parseFloat($('.product-size').val()) to NaN, and comparing any number with NaN with any operator will give you false, even comparing NaN with NaN will give you false.

What I suggest is to add events to the inputs, so when the user changes the value they'll be triggered and you can do the verification and show the messages as you want.

const size = document.querySelector('.product-size');

size.addEventListener('change', (event) => {
     console.log(event.target.value);
     // You can add the condition here and show your message
})

Upvotes: 2

Related Questions