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");
      }

我有一个输入框，其ID为“ 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

更改

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 2

document.getElementById("barcodeSearch").value将是一个字符串，但是您的数据barcode:909274636143具有整数。而且您正在与===进行比较，而不会强制输入。

尝试

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

Answer 3

您可以执行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 4

您要检查的输入值是一个字符串，但是您正在将其与产品对象中的数字进行比较。试试这个：

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

Answer 5

（我没有50多个声誉，只能发表评论，但是）有一行alert("invalid barcode");，如果您不希望这样显示，我会尝试将条件if(products [i].barcode === barcode)更改为if(products [i].barcode !== barcode)

如何在JavaScript函数中使用输入框中的值

5 个答案: