时间戳

首页 > 解决方案 > 如果数组已满，我如何禁用输入，如果未填写所有字段，则不允许输入？

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>

您好，如果字段留空，我无法弄清楚如何不允许添加汽车，并且车库中有最大数量的空间，如果车库已满，则反过来会禁用输入，我发布了我的代码没有错误，但我现在正在努力。我应该创建一个新功能来检查车库是否已满，还是可以在现有的 newCars 功能中使用它？

标签： javascripthtmljquerycss

解决方案

在此代码中，通过if条件检查记录的可用性。

if (newCar.year && newCar.make && newCar.model !== '') {
    garage.push(newCar);

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');

    displayGarage(newCar);
  } else {
    console.log('All fields must be filled');
  }


$(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
  if (newCar.year && newCar.make && newCar.model !== '') {
    garage.push(newCar);
    //empty inputs
    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');

    displayGarage(newCar); // NEW 
  } else {
    console.log('All fields must be filled');
  }
}
//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>

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

推荐阅读