Question

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

我尝试实现的

CodePen示例可以在HERE中找到。以及以下：

<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字段中。

现在我遇到的问题是：

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

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

非常感谢。

Answer 1

第一件事，我注意到您需要在计算中使用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>

JavaScript更新并取决于Select输入

现在我遇到的问题是：

1 个答案: