I am very new to JQuery and my problem is that I have 3 input fields to enter information about a car (year, make, model) and if the fields are filled out then the year, make and model get pushed into a garage array. However, as my code is currently written if the fields are not filled out and the Add Car button is clicked, there is an empty string that is pushed to the array. My assignment specifically states to not push an empty array if a user clicks the button when the fields are empty.
<body>
<div id="contents">
<h1>Week 6 Prework Assignment</h1>
<div id="input">
<input placeholder="Year" id="yearInput"/>
<input placeholder="Make" id="makeInput"/>
<input placeholder="Model" id="modelInput"/>
<button type="submit" id="addCarButton">Add Car Button</button>
<ul id='carList'>
</ul>
</div>
</div>
class Car{
constructor( year, make, model ){
this.year = year;
this.make = make;
this.model = model;
} //end constructor
} // end Car class
let garage = [];
function newCar( year, make, model ){
console.log( 'in newCar:', year, make, model );
garage.push( new Car( year, make, model ) );
return true;
}
// on document load
$( document ).ready(function(){
$('#addCarButton').on('click', function newCar(){
// declare new variable 'addedCar' and set equal to value of year, make and model inputs
let addedCar = new Car( $( '#yearInput' ).val(), $( '#makeInput' ).val(), $( '#modelInput' ).val() );
// push 'addedCar' variable to 'garage' array
garage.push( addedCar );
// run 'updateCars' function
updateCars();
// run 'textRequired' function
textRequired();
// empty year, make, model inputs
$('#yearInput').val( '' );
$('#makeInput').val( '' );
$('#modelInput').val( '' );
});
}); //end ready document
function updateCars(){
console.log('in updateCars');
// loop through and display cars on DOM
let carOutput = $('#carList');
carOutput.empty();
for(let car of garage ){
carOutput.append( '<li>' + car.year + ' ' + car.make + ' ' + car.model + '</li>');
} // end for of loop
} // end updateCars
function textRequired(){
if($('#yearInput').val()==='' || $('#makeInput').val()==='' || $('#modelInput').val()===''){
alert('Please enter text in the required fields');
}
}
An if statement will check for the value before pushing into the array and if any of the input is empty nothing will happen
class Car{
constructor( year, make, model ){
this.year = year;
this.make = make;
this.model = model;
} //end constructor
} // end Car class
let garage = [];
function newCar( year, make, model ){
console.log( 'in newCar:', year, make, model );
garage.push( new Car( year, make, model ) );
return true;
}
// on document load
$( document ).ready(function(){
$('#addCarButton').on('click', function newCar(){
if($( '#yearInput' ).val() && $( '#makeInput' ).val() && $( '#modelInput' ).val()){
let addedCar = new Car( $( '#yearInput' ).val(), $( '#makeInput' ).val(), $( '#modelInput' ).val() );
// push 'addedCar' variable to 'garage' array
garage.push( addedCar );
// run 'updateCars' function
updateCars();
// run 'textRequired' function
textRequired();
// empty year, make, model inputs
$('#yearInput').val( '' );
$('#makeInput').val( '' );
$('#modelInput').val( '' );
}
});
// declare new variable 'addedCar' and set equal to value of year, make and model inputs
}); //end ready document
function updateCars(){
console.log('in updateCars');
// loop through and display cars on DOM
let carOutput = $('#carList');
carOutput.empty();
for(let car of garage ){
carOutput.append( '<li>' + car.year + ' ' + car.make + ' ' + car.model + '</li>');
} // end for of loop
} // end updateCars
function textRequired(){
if($('#yearInput').val()==='' || $('#makeInput').val()==='' || $('#modelInput').val()===''){
alert('Please enter text in the required fields');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="contents">
<h1>Week 6 Prework Assignment</h1>
<div id="input">
<input placeholder="Year" id="yearInput"/>
<input placeholder="Make" id="makeInput"/>
<input placeholder="Model" id="modelInput"/>
<button type="submit" id="addCarButton">Add Car Button</button>
<ul id='carList'>
</ul>
</div>
</div>