如何在javascript函数中使用输入框中的值答案

【问题标题】：How to use the value from an input box in a javascript function如何在javascript函数中使用输入框中的值
【发布时间】：2018-10-16 18:27:05
【问题描述】：

我正在尝试运行一个扫描以下数组的函数：

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

当我尝试以这种方式运行该功能时，我不断收到警报（“无效条形码”）。

任何想法为什么？谢谢

【问题讨论】：

去掉products和[i]之间的空格

标签： javascript arrays function input

【解决方案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);
}});

&lt;input type="text" id="barcodeSearch"&gt;

【讨论】：

【解决方案2】：

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

试试

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

（我没有 50+ 的声誉只能发表评论，但是）有一行alert("invalid barcode");，如果你不想显示这个，我会尝试将条件if(products [i].barcode === barcode)更改为if(products [i].barcode !== barcode)之类的东西

【讨论】：

我不确定这是您需要的，或者它是否正确。如果有帮助，请告诉我。 :)
我认为问题更多的是为什么条形码被认为是无效的，而不是为什么会显示警报。