If statement isn't working properly

Question

I currently have a form which is hiding and showing elements depending on the value the user inputs. But for some reason my if statement only seems to be working for the first if/else condition and not the bottom 3

Javascript:

var car1       = document.getElementById("motorbike");  
var car2       = document.getElementById("smartCar");
var car3       = document.getElementById("largeCar");
var car4       = document.getElementById("motorhome");
var daysAmount = document.getElementById('my-number-days');



if (daysAmount.value >= '1' && daysAmount.value <= '5') {
    car1.style.display = "inline-block";
} else {
    $(car1).hide(400);  
}

if (daysAmount.value >= '1' && daysAmount.value <= '10') {
    car2.style.display = "inline-block";
} else {
    $(car2).hide(400);  
}

if (daysAmount.value >= '3' && daysAmount.value <= '10') {
    car3.style.display = "inline-block";
} else {
    $(car3).hide(400);  
}

if (daysAmount.value >= '2' && daysAmount.value <= '15') {
    car4.style.display = "inline-block";
} else {
    $(car4).hide(400);  
}

Answer 1

Parse your strings to integers to compare correctly:

var daysAmountInt = parseInt(daysAmount.value);
if (daysAmountInt >= 1 && daysAmountInt <= 5) {
    car1.style.display = "inline-block";
} else {
    $(car1).hide(400);  
}