时间戳

首页 > 解决方案 > JavaScript 更新并依赖于选择输入

javascript - JavaScript 更新并依赖于选择输入

问题描述

我遇到了一个很大的问题，无法接近解决方案。我在 JS 方面不是最好的，并且正在尝试学习这种语言，我相信如果不是完整的解决方案，您至少可以给我一些提示。

可以在这里找到我想要实现的 CodePen 示例。以及以下：

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

一般来说，我正在寻找一种解决方案，它可以让我在不影响数据库的情况下操作呈现给用户的屏幕上的数据。

我的报告将仅显示几行带有 sku_id、描述和数量的数据。

将要求用户输入两个输入。Box id，它将显示此框中包含的所有 SKU - 没问题。之后用户将被要求将 SKU id 扫描到 sku 字段中。

现在我遇到的问题是：

  1. 修改/减去数量，其中 sku_id = 用户输入 sku_id
  2. 更新 qty = 0 的整行背景
  3. 应显示扫描的项目总数，但不允许过度扫描。

希望我已经足够清楚了，但是如果您还有其他问题，请随时提出，我很乐意为您提供帮助。

提前谢谢了。

标签： javascripthtml-tablehtml-tbody

解决方案

我注意到您需要在计算中使用parseInt()的第一件事。当您获得一个节点的 innerText 时，它会以字符串的形式返回，那么您需要在对其进行任何类型的数学运算之前对其进行解析（例如递减它）。

接下来，您有 2 个相同的 ID ( totalSKU)，ID 应该是唯一的。所以我将它们更新为最后有 1 和 2。当搜索通过时，它会将搜索附加到 ID 以获取正确的 ID。您应该围绕此添加更多检查（例如，如果搜索不是有效数字）。

我也更新了一些 var 名称，以便在下面的示例中更加清晰。在示例中，您可以输入1或2在搜索中，它将减少正确的 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>

推荐阅读