Как реализовать счётчик? Ошибка в NaN!

Question

Мне нужно так, что б при нажатии на "плюс" цена увеличивалась на 1. Но у меня выскакивает вечно NaN, как быть?

<div class="drive__price">
    <p class="drive__price_par">Цена за сутки</p>
       <div class="drive__price_left">
       <input type="text" name="price" class="drive__input_left" placeholder="От 0 руб." id="house" value="1">
    <div class="drive__input_arrow-left"><i class="fas fa-plus"></i></div>
    </div>
    <div class="drive__price_right">
       <input type="text" name="price" class="drive__input_right" placeholder="До 999 руб." id="house">
       <div class="drive__input_arrow-right"><i class="fas fa-plus"></i></div>
    </div>

JS код:

$('.drive__input_arrow-left').click(function() {
        var $price = $(".drive__input_left");
        $price.val(parseInt($price.val()) + 1);
        $price.change();
});

CSS код:

.drive__price {
    margin-left: 157px;
    margin-top: 51px;
}

.drive__price_par {
    display: block;
    font-size: 1.125em;
    font-weight: 400;
    margin-bottom: 33px;
}

.drive__price_left {
    position: relative;
    display: inline-block;
}

.drive__price_right {
    position: relative;
    display: inline-block;
    margin-left: 40px;
}

.drive__input_left {
    border-radius: 19px;
    background-color: #f1f1f1;
    height: 38px;
    width: 165px;
    padding: 11px 76px 13px 22px;
    color: #000;
    font-weight: 400;
}

.drive__input_arrow-left {
    position: absolute;
    border-radius: 19px;
    background-color: #0b3ba7;
    padding: 7px 22px 0px 26px;
    top: 12%;
    left: 97px;
    height: 29px;
    line-height: 0;
}

.drive__input_right {
    border-radius: 19px;
    background-color: #f1f1f1;
    height: 38px;
    width: 165px;
    padding: 11px 76px 13px 22px;
    color: #000;
    font-weight: 400;
}

.drive__input_arrow-right {
    position: absolute;
    border-radius: 19px;
    background-color: #0b3ba7;
    padding: 7px 22px 0px 26px;
    top: 12%;
    left: 97px;
    height: 29px;
    line-height: 0;
}

Answer 1

Ошибка происходит, потому что, если в форме нет значения, или оно не является приводимым к числовому, то при попытке таки привести его к числовому, эта операция вернет NaN. Все что нужно было добавить - это проверку на NaN:

$('.drive__input_arrow-left').click(function() {
        var $price = $(".drive__input_left");
        var val = parseInt($price.val());
        $price.val(isNaN(val) ? 0: val + 1);
        $price.change();
});

.drive__price {
    margin-left: 157px;
    margin-top: 51px;
}

.drive__price_par {
    display: block;
    font-size: 1.125em;
    font-weight: 400;
    margin-bottom: 33px;
}

.drive__price_left {
    position: relative;
    display: inline-block;
}

.drive__price_right {
    position: relative;
    display: inline-block;
    margin-left: 40px;
}

.drive__input_left {
    border-radius: 19px;
    background-color: #f1f1f1;
    height: 38px;
    width: 165px;
    padding: 11px 76px 13px 22px;
    color: #000;
    font-weight: 400;
}

.drive__input_arrow-left {
    position: absolute;
    border-radius: 19px;
    background-color: #0b3ba7;
    padding: 7px 22px 0px 26px;
    top: 12%;
    left: 97px;
    height: 29px;
    line-height: 0;
}

.drive__input_right {
    border-radius: 19px;
    background-color: #f1f1f1;
    height: 38px;
    width: 165px;
    padding: 11px 76px 13px 22px;
    color: #000;
    font-weight: 400;
}

.drive__input_arrow-right {
    position: absolute;
    border-radius: 19px;
    background-color: #0b3ba7;
    padding: 7px 22px 0px 26px;
    top: 12%;
    left: 97px;
    height: 29px;
    line-height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drive__price">
    <p class="drive__price_par">Цена за сутки</p>
       <div class="drive__price_left">
       <input type="text" name="price" class="drive__input_left" placeholder="От 0 руб." id="house" value="1">
    <div class="drive__input_arrow-left"><i class="fas fa-plus"></i></div>
    </div>
    <div class="drive__price_right">
       <input type="text" name="price" class="drive__input_right" placeholder="До 999 руб." id="house">
       <div class="drive__input_arrow-right"><i class="fas fa-plus"></i></div>
    </div>

БЛОГ НА HUSL

Как реализовать счётчик? Ошибка в NaN!

Ответы (1 шт):