我对 JQuery 很陌生,我的问题是我有 3 个输入字段来输入有关汽车的信息(年份、品牌、型号),如果填写了这些字段,那么年份、品牌和型号就会被推入一个garage
数组中。但是,由于我的代码当前是在未填写字段并Add Car
单击按钮的情况下编写的,因此会向数组推送一个空字符串。我的任务明确指出,如果用户在字段为空时单击按钮,则不要推送空数组。
<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');
}
}