如何通过 ID 查找 HTML 元素是否存在并输入不同的内容

Question

在此先感谢您的帮助。

我有 50 个网页，每个页面都包含以下列表中的几个产品元素：

<span id="supS"></span>
<span id="supM"></span>
<span id="supL"></span>
<span id="supX"></span>
<span id="lotS"></span>
<span id="lotM"></span>
<span id="lotL"></span>
<span id="lotX"></span>
<span id="marS"></span>
<span id="marM"></span>
<span id="marL"></span>
<span id="marX"></span>

我使用这些元素从 <script>:

中提取价格

document.getElementById("supS").innerHTML="100";
document.getElementById("supM").innerHTML="250";
document.getElementById("supL").innerHTML="400";
document.getElementById("supX").innerHTML="750";
document.getElementById("lotS").innerHTML="10";
document.getElementById("lotM").innerHTML="25";
document.getElementById("lotL").innerHTML="40";
document.getElementById("lotX").innerHTML="75";
document.getElementById("marS").innerHTML="55";
document.getElementById("marM").innerHTML="70";
document.getElementById("marL").innerHTML="85";
document.getElementById("marX").innerHTML="99";

即使我没有所有产品，我也必须在所有页面上使用所有 ID，但如果我没有您所了解的所有产品，代码将无法工作。

所以我还使用了另一个列表，其中我提到了应该显示哪些 ID：

document.getElementById("supS").style.display = "none";
document.getElementById("supM").style.display = "none";
// document.getElementById("supL").style.display = "none";
// document.getElementById("supX").style.display = "none";
document.getElementById("lotS").style.display = "none";
document.getElementById("lotM").style.display = "none";
document.getElementById("lotL").style.display = "none";
// document.getElementById("lotX").style.display = "none";
document.getElementById("marS").style.display = "none";
document.getElementById("marM").style.display = "none";
// document.getElementById("marL").style.display = "none";
document.getElementById("marX").style.display = "none";

我的目标是 HTML 中只有可用的产品元素，从每个页面中删除不可用的（我将手动执行）；

并使用 JavaScript 来：

通过 ID 检查 HTML 中是否存在产品元素；
更改价格（如果存在）；
如果没有，则检查列表中的其他产品；
更改价格（如果存在）；
如果没有则停止检查。

我需要你的帮助来创建一个JS函数。

如果可能，请在您的示例中使用上面提到的元素和价格，以便我理解，我将不胜感激。

非常感谢。

Answer 1

只是循环测试。

跨度小于数据的解决方案

const data = {
  "supS": 100,
  "supM": 250,
  "supL": 400,
  "supX": 750,
  "lotS": 10,
  "lotM": 25,
  "lotL": 40,
  "lotX": 75,
  "marS": 55,
  "marM": 70,
  "marL": 85,
  "marX": 99
}
Object.entries(data).forEach(([k, v]) => {
  const span = document.getElementById(k);
  if (span) span.innerText = v;
})

<span id="supS"></span>
<span id="supM"></span>
<span id="supL"></span>
<span id="supX"></span>
<span id="marS"></span>
<span id="marM"></span>
<span id="marL"></span>
<span id="marX"></span>

如果跨度比数据多的解决方案：

const data = {
  "supS": 100,
  "lotX": 75,
  "marS": 55,
  "marM": 70,
  "marL": 85,
  "marX": 99
};
[...document.querySelectorAll("span")].forEach(span => span.innerText = data[span.id] || "N/A");

<span id="supS"></span>
<span id="supM"></span>
<span id="supL"></span>
<span id="supX"></span>
<span id="marS"></span>
<span id="marM"></span>
<span id="marL"></span>
<span id="marX"></span>

Answer 2

我不明白你为什么不根据库存状态创建字段，但这可能会对你有所帮助：

var arrProduct = []; // I assume you get a json like that from server side [{"ProductName": "supS", "AvailStock": 3, "Price": 2.35}, {"ProductName": "lotM", "AvailStock": 0, "Price": 0}]
    for (var i = 0; i < arrProduct.length; i++) {
        if (arrProduct[i].AvailStock > 0){
            document.getElementById(arrProduct[i].ProductName).innerHTML = arrProduct[i].Price;
        }
        else {
            document.getElementById(arrProduct[i].ProductName).style.display = "none";
        }
    }

如何通过 ID 查找 HTML 元素是否存在并输入不同的内容

How to find if HTML elements EXIST by ID and input different CONTENT

javascript

function

innerhtml

getelementbyid

exists