这就是我得到的,当在输入框中输入内容时,该项目会推送到数组,然后单击按钮提交,我似乎无法将其显示在 html 上,不确定我哪里出错了
$( document ).ready ( readyNow );
let garage = [];
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
$( '#yearInput' ).val( '' );
$( '#makeInput' ).val( '' );
$( '#modelInput' ).val( '' );
}
console.log(garage);
function displayGarage(){
console.log('in displayGarage');
$('#garageOut ').append
( '<li> Year: ' + newCars.year +
'Make: ' + newCars.make +
'Model: ' + newCars.model +'</li>');
}
<!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">
<title>Week 6 Tier 1 Assignment</title>
</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 placeholder="Year" id="yearInput" />
<input placeholder="Make" id="makeInput" />
<input placeholder="Model" id="modelInput" />
<button id= "addCarButton">Add Car</button>
<h3>Garage:</h3>
<div id ="garageOut"></div>
</div>
</body>
</html>
请帮忙,我可以看到当输入按钮时数组在控制台中输出,但我的 html 上没有显示任何内容,我是否没有以某种方式获取它?我在 html 的 div 上将 id 设置为 GarageOut
撒科打诨
相关分类