JavaScript update and depending onSelect input

Question

I've faced quite a big issue and cannot get near to the solution. I am not the best in JS and trying to learn this language and I believe that you will be able to give me at least few hints if not full solution.

CodePen sample of what I am trying to achieve can be found HERE. And below:

<input type="search" id="myInput" onSearch="myFunction()" placeholder="scan sku id here">
<p id="mySearch"></p>
<table> 
<th>SKU ID</th>
    <th>QTY</th>
  <tBody>
    <tr>
      <td>SKU1</td>
      <td id="totalSKU">6</td>
    </tr>
    <tr>
      <td>SKU2</td>
      <td id="totalSKU">8</td>
    </tr>
  </tBody>
</table>
<br/>
<p>TOTAL:<p>
<p id="myVar">0</p>

<script>
  var x = document.getElementById("myInput");
  var y = document.getElementById('totalSKU').innerText;
  var z = 0;

function myFunction() {
  document.getElementById("mySearch").innerHTML = x.value;
    if(y>0)
    {
      document.getElementById('totalSKU').innerText = --y;
      document.getElementById('myVar').innerText = ++z;
    }
  else
    alert("Cannot Proceed!");
}
</script>

In general I am looking for a solution that could allow me to manipulate data on screen presented to the user without affecting database.

My report will simply show few rows of data with sku_id, description and qty.

User will be asked for two inputs. Box id, which will display all SKU's contained in this box - no problem with that. Afterwards user will be asked to scan SKU id into sku field.

Now the problems I am having are:

1. Amend/Subtract qty where sku_id = user input sku_id
2. Update background of whole row where qty = 0
3. Should display total number of items scanned, but not allow to over scan.

Hope I was clear enough, but if you have any further questions, feel free to ask and I am happy to assist you with.

Many thanks in advance.

Answer 1

The first thing I noticed you need to use parseInt() in your calculations. When you get the innerText of a node it comes back as a String, then you need to parse it before doing any kind of math on it (like decrementing it).

Next, you have 2 IDs that are the same (totalSKU), IDs should be unique. So I updated them to have a 1 and 2 at the end. When the search comes through it will append the search to the ID to get the correct one. You should add more checks around this (like if the search isn't a valid number).

I updated some of the var names too to be more clear in the example below. In the example you can enter 1 or 2 in the search and it will decrement the correct SKU.

var searchInput = document.getElementById("myInput");

function myFunction() {
  var totalVar = document.getElementById('myVar');
  var searchValue = parseInt(searchInput.value);
  var totalSKU = document.getElementById(`totalSKU${searchValue}`);
  
  if(totalSKU === null){
    alert("no SKU found");
    return;
  }
  
  var totalSKUNumber = parseInt(totalSKU.innerText);

  document.getElementById("mySearch").innerText = searchValue;

  if (totalSKUNumber > 0) {
    totalSKU.innerText = --totalSKUNumber;
    totalVar.innerText = parseInt(totalVar.innerText) - 1;
  } else {
    alert("Cannot Proceed!");
  }
}

<input type="search" id="myInput" onSearch="myFunction()" placeholder="scan sku id here">
<p id="mySearch"></p>
<table>
  <th>SKU ID</th>
  <th>QTY</th>
  <tBody>
    <tr>
      <td>SKU1</td>
      <td id="totalSKU1">6</td>
    </tr>
    <tr>
      <td>SKU2</td>
      <td id="totalSKU2">15</td>
    </tr>
  </tBody>
</table>
<br/>
<p>TOTAL:
  <p>
    <p id="myVar">21</p>