Question

我有这个功能，当我输入参数时，它可以完美地工作，但这不是我所需要的，因此鉴于以下代码，我如何使用用户输入值而不是参数来搜索数组并返回对象？请保持尽可能简单，我是javaScript的新手。请同时将输入和按钮也包含为html字段。

carSelection = [{
    manufacturer: "Fiat Automobiles S.p.A.",
    type: "Fiat 500",
    fuel: "Eurosuper        98",
    condition: "New",
    enginePower: "101kW"
  },
  {
    manufacturer: "Kia Motors Corporation (KMC)",
    type: "Kia Sportage",
    fuel: "Euro Diesel",
    condition: "Used",
    enginePower: "185kW"
  },
  {
    manufacturer: "BMW AG",
    type: "BMW X5",
    fuel: "Euro Diesel",
    condition: "Used",
    enginePower: "195kW"
  },

  {
    manufacturer: "Toyota Motor Corporation ",
    type: "Toyota Corolla",
    fuel: "Eurosuper 95",
    condition: "Used",
    enginePower: "165kW"
  }
];


var bmw = 'BMW X5';
// var n1 = bmw.indexOf("bmw", 0);
var toyota = 'Toyota Corolla';
var fiat = 'Fiat 500';
var kia = 'Kia Sportage';



var input = document.getElementById("input").value;

function findCar(arr, searchProp) {
  var rezArr = [];
  for (var i = 0; i < arr.length; i++) {
    Object.keys(arr[i]).forEach(function(prop) {
      if (arr[i][prop] === searchProp) {
        rezArr.push(arr[i]);
      }
    })
  }

  return rezArr;
}



var item2 = findCar(carSelection, bmw);
console.log(item2);

<input id="input" type="text"/>

Answer 1

您输入的html对我来说很好。您应该添加一个类似于<button id="button">的按钮。

现在，您要向按钮添加click事件监听器。基本上，这是一个函数，只要单击该按钮，就会调用它。有两种添加事件监听器的方法，但我认为最好的方法是

const button = document.getElementById('button'); //get a reference to the button element
button.addEventListener('click', handleClick) // specify a function that should be called whenever the button is clicked
function handleClick(){
    var input = document.getElementById("input").value;//get the current value of the input
    findCar(carSelection, input) //find the car

}

因此，每当单击按钮时，我们都会获取input的当前值，并将其传递给您已经编写的函数。

当前代码无法正常工作的原因是，在脚本加载后（很有可能是，用户还没有时间在其中键入任何内容），您就抓住了input的值。因此，它将始终是一个空字符串（""）。

使用用户输入值而不是参数

1 个答案: