Используйте пользовательское значение ввода вместо параметра

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

Теперь вам нужно добавить прослушиватель событий нажатия кнопки. В основном это функция, которая будет вызываться при каждом нажатии кнопки. Есть несколько способов добавить прослушиватель событий, но я думаю, что лучший -

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, как только скрипт загружается, когда, скорее всего, пользователь еще не успел что-нибудь набрать в него. Так что это всегда будет пустая строка ("").