how do i put what is inputted with buttons through a function back to an index.html?

this is what ive got, the item pushes to the array when typed in to the input boxes and the button is clicked to submit, i just cant seem to get it displayed on the html not sure where ive went wrong

$( 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>');
  }

JavaScript
​x
 
$( 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>

JavaScript
 
<!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>
​

please help, i can see that the array is outputted in the console when typed into the buttons but nothing shows up on my html, am i not sourcing it somehow? i have the id set to garageOut on a div on the html

Answer

You are not calling displayGarage after adding a new car.
Simply calling it is not enough, you need to pass a new car to it

$(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>');
}

JavaScript
 
$(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>

JavaScript
 
<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>

Advertisement

Answer