How to use the value from an input box in a javascript function

Question

I am trying to run a function that scans the following array:

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

The function used to scan this array and then subsequently display the products information is:

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

I have an input box with an id of "barcodeSearch" and I am trying to use the value I enter into this input box with the above function. I have the following code:

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

When I try to run the function this way I keep receiving the alert ("invalid barcode").

Any ideas why? Thanks

remove the space between products and [i]

Randy Casburn
– Randy Casburn

2018-10-16 18:30:41 +00:00
Commented Oct 16, 2018 at 18:30 — Randy Casburn
– Randy Casburn, Commented Oct 16, 2018 at 18:30

Amin.MasterkinG · Accepted Answer · 2018-10-16 18:44:27Z

Change

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

to

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

Test :

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

Alex Wayne · Accepted Answer · 2018-10-16 18:32:52Z

1

document.getElementById("barcodeSearch").value is going to be a string, but your data barcode:909274636143 has integers. And you are comparing with === with will not do type coercion.

Try

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

answered Oct 16, 2018 at 18:32

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Comments

brk · Accepted Answer · 2018-10-16 18:42:55Z

You can do this instead of doing document.getElementById("barcodeSearch").value multiple times. Secondly the data type of the value from an input is string and === will return false if the comparison is not between same data type. So convert string to number using +

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>

Paul · Accepted Answer · 2018-10-16 18:31:47Z

0

The input value you're checking is a string, but you're comparing it to a number in your product objects. Try this:

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

answered Oct 16, 2018 at 18:31

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Comments

Dan · Accepted Answer · 2018-10-16 18:33:30Z

-1

(I don't have 50+ reputation to only comment but) There is a line alert("invalid barcode");, if you need this not to be the thing displayed, I would try to change the condition if(products [i].barcode === barcode) to something like if(products [i].barcode !== barcode)

answered Oct 16, 2018 at 18:33

Dan

1591 gold badge7 silver badges20 bronze badges

2 Comments

Dan Over a year ago

I'm not exactly sure this is what you need though, or if it would be correct. If it helps, let me know. :)

Alex Wayne Over a year ago

I think the question is more why is the barcode being considered invalid, rather than why is the alert being shown.

Collectives™ on Stack Overflow

How to use the value from an input box in a javascript function

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related