Как использовать значение из поля ввода в функции JavaScript

Question

Я пытаюсь запустить функцию, которая сканирует следующий массив:

var products = [
{
brand:"Healthy Boy",
product:"Sweet Chilli Sauce",
size: 300,
measurement: "ml",
barcode:909274636143,
quantity:"2"
},
{
brand:"Kikkoman",
product:"Soy Sauce",
size: 1,
measurement: "litre",
barcode:2345324513,
quantity:"23"
},
{
brand:"Golden Dragon",
product:"Rice",
size: 1,
measurement: "kg",
barcode:5623593845,
quantity:"5"
}
];

Функция, используемая для сканирования этого массива и последующего отображения информации о продуктах:

 function isBarcodeValid (barcode){
  for(var i = 0; i < products.length; i++) {
     if(products [i].barcode === barcode) {
      document.querySelector('#productBrandResult').textContent = 
      (products[i].brand);
      document.querySelector('#productNameResult').textContent = 
      (products[i].product);
      document.querySelector('#productSizeResult').textContent = 
      (products[i].size);
      document.querySelector('#productMeasurementResult').textContent = 
      (products[i].measurement);
      document.querySelector('#productBarcodeResult').textContent = 
      (products[i].barcode);
      document.querySelector('#productQuantityResult').textContent = 
      (products[i].quantity);
         }
      }
      alert("invalid barcode");
      }

У меня есть поле ввода с идентификатором «barcodeSearch», и я пытаюсь использовать значение, которое я ввожу в это поле ввода с помощью вышеуказанной функции.У меня есть следующий код:

    function checkLength(){
    return document.getElementById("barcodeSearch").value.length;
}

document.getElementById("barcodeSearch").addEventListener("keypress", 
function (event) {
    if (checkLength() > 0 && event.keyCode === 13){
    var barcodeEntered = document.getElementById("barcodeSearch").value;
    isBarcodeValid(barcodeEntered);
}
});

Когда я пытаюсь запустить эту функцию таким образом, я получаю предупреждение («неверный штрих-код»).

Есть идеи почему?Спасибо

Answer 1

Вы можете сделать this вместо document.getElementById("barcodeSearch").value несколько раз.Во-вторых, тип данных значения из ввода - строка, и === вернет false, если сравнение не между одним и тем же типом данных.Так что конвертируйте строку в число используя +

function isBarcodeValid(barcode) {
   //using filter to get matched array of objects with required datatype
   products.filter(function(item) {
    return item.barcode === +barcode;// converting string to number
  }).forEach(function(item) {
    document.querySelector('#productBrandResult').textContent = item.brand
  })

}

document.getElementById("barcodeSearch").addEventListener("keypress",
  function(event) {
    if (this.value.length > 0 && event.keyCode === 13) {
      isBarcodeValid(this.value);
    }
  });

var products = [{
    brand: "Healthy Boy",
    product: "Sweet Chilli Sauce",
    size: 300,
    measurement: "ml",
    barcode: 909274636143,
    quantity: "2"
  },
  {
    brand: "Kikkoman",
    product: "Soy Sauce",
    size: 1,
    measurement: "litre",
    barcode: 2345324513,
    quantity: "23"
  },
  {
    brand: "Golden Dragon",
    product: "Rice",
    size: 1,
    measurement: "kg",
    barcode: 5623593845,
    quantity: "5"
  }
];

<input id='barcodeSearch'>
<div id='productBrandResult'></div>

Answer 2

Изменить

if(products [i].barcode === barcode) {

на

if(products [i].barcode == barcode) {

Тест:

var products = [
{
brand:"Healthy Boy",
product:"Sweet Chilli Sauce",
size: 300,
measurement: "ml",
barcode:909274636143,
quantity:"2"
},
{
brand:"Kikkoman",
product:"Soy Sauce",
size: 1,
measurement: "litre",
barcode:2345324513,
quantity:"23"
},
{
brand:"Golden Dragon",
product:"Rice",
size: 1,
measurement: "kg",
barcode:5623593845,
quantity:"5"
}
];

 function checkLength(){
    return document.getElementById("barcodeSearch").value.length;
}


 function isBarcodeValid (barcode){
  for(var i = 0; i < products.length; i++) {
     if(products [i].barcode == barcode) {
		alert(products[i].brand);
		return;
     }
  }
  alert("invalid barcode");
}
	  
document.getElementById("barcodeSearch").addEventListener("keypress", 
function (event) {
    if (checkLength() > 0 && event.keyCode === 13){
    var barcodeEntered = document.getElementById("barcodeSearch").value;
    isBarcodeValid(barcodeEntered);
}});

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

Answer 3

document.getElementById("barcodeSearch").value будет строкой, но ваши данные barcode:909274636143 имеют целые числа.И вы сравниваете с === с не приведёт к принуждению типа.

Попробуйте

if (products[i].barcode === barcode.toString()) {

Answer 4

(у меня нет 50+ репутации, чтобы только комментировать, но) Есть строка alert("invalid barcode");, если вам нужно, чтобы это не отображалось, я бы попытался изменить условие if(products [i].barcode === barcode) на что-то вроде if(products [i].barcode !== barcode)

Answer 5

Входное значение, которое вы проверяете, является строкой, но вы сравниваете ее с числом в объектах вашего продукта.Попробуйте это:

var barcodeEntered = parseInt(document.getElementById("barcodeSearch").value);
isBarcodeValid(barcodeEntered);