如何使用输入创建一个数组，然后将其传递给另一个函数 jQuery答案

【问题标题】：How do I make an array with inputs and then pass it to another function jQuery如何使用输入创建一个数组，然后将其传递给另一个函数 jQuery
【发布时间】：2021-01-01 00:03:48
【问题描述】：

我有输入和按钮工作，它进入我的车库阵列。我应该使用 javascript 底部的 newCar 函数来了解 HTML 从何处开始将汽车添加到列表中，并使用 jQuery 将其放入无序列表中，请帮助我无法让 newCar 工作

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

并且底部的 HTML 与 javascript 文件是分开的，当我输入问题时，我只是不知道如何使它成为一个单独的代码

【问题讨论】：

对我来说看起来不错，但是当 html 准备好时，您需要运行 readyNow，例如添加$(readyNow)
输入内容时如何获取字符串的值，然后使用 newCar 函数在 html 上显示内容？
您好，您可以在此处添加onclick <button id="addCarButton" onclick="addCar()">Add Car</button>，这样每当用户点击添加按钮时，您的函数就会被调用。
不确定我是否理解正确，但现在 newCar 没有被调用并且 addCar 正在做所有事情。您只需将 addCar 函数中对 newCars 和其他相关部分的赋值替换为调用 newCar 函数即可。

标签： javascript html jquery css

【解决方案1】：

您将事件附加到函数readyNow() 中，但该函数从未被调用，因此您不附加事件。您需要在 JavaScirpt 的根目录或自调用函数中调用 $( '#addCarButton' ).on( 'click', addCar )。之后它应该可以工作了。

另一件事，我注意到您将汽车添加到车库两次，在 if (newCars.year && newCars.make && newCars.model !== '') 之后和之前，我相信您应该只添加一次汽车，可能在if 条件内，但我不是100 % 确定业务逻辑，只是想引起您的注意。

Hope this working example helps!

【讨论】：

非常抱歉，我不清楚，我猜我忘记了顶部的一行代码。 $( 文档 ).ready ( readyNow );那是在顶部使 readyNow 工作，这就是让我的按钮工作，一切似乎都工作我真的想知道我怎样才能获得输入的内容的值并将其与 newCar 函数一起使用？例如：年份，制作模型
它在我链接的代码框上正常工作。您确定您的 document.ready 正确触发了吗？

【解决方案2】：

newCar 函数本身有效。如果你想在运行newCar函数时显示newCarObject，你还需要运行displayGarage函数，像这样

function newCar(yearInput, makeInput, modelInput){
  console.log('in newCar:', yearInput, makeInput, modelInput);
  const newCarObject = {
    year: yearInput,
    make: makeInput,
    model: modelInput
  }
  garage.push(newCarObject);
  // Display as unordered list
  displayGarage(newCarObject);
  return true;
} // end newCar

【讨论】：