I have the inputs and button working and it goes to my garage array. I'm supposed to use the newCar function at the bottom of the javascript about where the HTML starts to add the car to the list and put it in an unordered list using jQuery please help I can't get the newCar to work
$( document ).ready ( readyNow );
let garage = [];
const maxCars = 3;
function readyNow() {
console.log( 'JQ' );
$( '#addCarButton' ).on( 'click', addCar )
} //end readyNow
function addCar() {
console.log('in addCar');
//get unser inputs
//create new object
let newCars = {
year: $( '#yearInput' ).val(),
make: $( '#makeInput' ).val(),
model: $( '#modelInput' ).val()
}
//push the new car into the array
garage.push( newCars );
//empty inputs
if (newCars.year && newCars.make && newCars.model !== '') {
garage.push(newCars);
$('#yearInput').val('');
$('#makeInput').val('');
$('#modelInput').val('');
displayGarage(newCars);
} else {
console.log('All fields must be filled');
}
if (garage.length === 5) {
$('#yearInput').prop("disabled", true);
$('#makeInput').prop("disabled", true);
$('#modelInput').prop("disabled", true);
}
console.log(garage);
}
function displayGarage(newCars){
console.log('in displayGarage');
$('#garageOut ').append
( '<li> Year: ' + newCars.year +
' Make: ' + newCars.make +
' Model: ' + newCars.model +'</li>');
}
function required() {
let empt = document.forms['yearInput']['makeInput']['modelInput'].value;
if (empt == "")
{
console.log('Please enter values in all forms');
return false;
}
else {
console.log('Car Successfully added!');
return true;
}
}
/*
Do not change newCar for base mode!
*/
function newCar(yearInput, makeInput, modelInput){
console.log('in newCar:', yearInput, makeInput, modelInput);
const newCarObject = {
year: yearInput,
make: makeInput,
model: modelInput
}
garage.push(newCarObject);
return true;
} // end newCar
//newCar(1991, 'Plymouth', 'Horizon')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="scripts/jQuery.js" charset="utf-8"></script>
<script src="scripts/client.js" charset="utf-8"></script>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<h1><img src="images/logo.png" alt="noah's car garage"></h1>
<h2>Please Enter your Year, Make, and Model: <span id="garageList"></span></h2>
<input type="string" placeholder="Year" id="yearInput" />
<input type="string" placeholder="Make" id="makeInput" />
<input type="string" placeholder="Model" id="modelInput" />
<button id= "addCarButton">Add Car</button>
<h3>Garage:</h3>
<div id ="garageOut"></div>
</div>
</body>
</html>
and the HTML at the bottom is separated from the javascript file I just couldn't figure out how to make it a separate code thing when I typed out the question
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
