如何将通过函数使用按钮输入的内容返回到index.html?

这就是我得到的,当在输入框中输入内容时,该项目会推送到数组,然后单击按钮提交,我似乎无法将其显示在 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


哈士奇WWW
浏览 98回答 1
1回答

撒科打诨

displayGarage添加新车后您不再打电话。仅仅调用它是不够的,你需要传递一个新车给它$(document).ready(readyNow);let garage = [];function readyNow() {&nbsp; console.log('JQ');&nbsp; $('#addCarButton').on('click', addCar)} //end readyNowfunction addCar() {&nbsp; console.log('in addCar');&nbsp; //get unser inputs&nbsp; //create new object&nbsp; let newCar = {&nbsp; &nbsp; year: $('#yearInput').val(),&nbsp; &nbsp; make: $('#makeInput').val(),&nbsp; &nbsp; model: $('#modelInput').val()&nbsp; }&nbsp; //push the new car into the array&nbsp; garage.push(newCar);&nbsp; //empty inputs&nbsp; $('#yearInput').val('');&nbsp; $('#makeInput').val('');&nbsp; $('#modelInput').val('');&nbsp; displayGarage(newCar); // NEW}console.log(garage);function displayGarage(newCar) { // NEW&nbsp; console.log('in displayGarage');&nbsp; $('#garageOut ').append('<li> Year: ' + newCar.year +&nbsp; &nbsp; 'Make: ' + newCar.make +&nbsp; &nbsp; 'Model: ' + newCar.model + '</li>');}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html><head>&nbsp; <meta charset="utf-8">&nbsp; <script src="scripts/jQuery.js" charset="utf-8"></script>&nbsp; <script src="scripts/client.js" charset="utf-8"></script>&nbsp; <link rel="stylesheet" href="styles/style.css">&nbsp; <title>Week 6 Tier 1 Assignment</title></head><body>&nbsp; <h1><img src="images/logo.png" alt="noah's car garage"></h1>&nbsp; <h2>Please Enter your Year, Make, and Model: <span id="garageList"></span></h2>&nbsp; <input placeholder="Year" id="yearInput" />&nbsp; <input placeholder="Make" id="makeInput" />&nbsp; <input placeholder="Model" id="modelInput" />&nbsp; <button id="addCarButton">Add Car</button>&nbsp; <h3>Garage:</h3>&nbsp; <div id="garageOut"></div>&nbsp; </div></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript