这就是我得到的，当在输入框中输入内容时，该项目会推送到数组，然后单击按钮提交，我似乎无法将其显示在 html 上，不确定我哪里出错了$( document ).ready ( readyNow );let garage = [];function readyNow() { console.log( 'JQ' ); $( '#addCarButton' ).on( 'click', addCar )} //end readyNowfunction 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
1 回答
撒科打诨
TA贡献1934条经验 获得超2个赞
displayGarage添加新车后您不再打电话。仅仅调用它是不够的，你需要传递一个新车给它
$(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 newCar = {
year: $('#yearInput').val(),
make: $('#makeInput').val(),
model: $('#modelInput').val()
}
//push the new car into the array
garage.push(newCar);
//empty inputs
$('#yearInput').val('');
$('#makeInput').val('');
$('#modelInput').val('');
displayGarage(newCar); // NEW
}
console.log(garage);
function displayGarage(newCar) { // NEW
console.log('in displayGarage');
$('#garageOut ').append('<li> Year: ' + newCar.year +
'Make: ' + newCar.make +
'Model: ' + newCar.model + '</li>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>
添加回答
举报
0/150
提交
取消