Search code examples
javascriptfunctioninnerhtmlgetelementbyidexists

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

Thanks in advance for your help.

I have 50 webpages and each page contains several products-elements from the following list:

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

I use these elements to pull the prices from <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";

I have to use all IDs on all pages even if i don't have all products, but the code won't work if i don't have everything as you understand.

So i also use another list in which i mention which IDs should be displayed:

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

My goal is to have only available products-elements in HTML, remove unavailable from every page (which i'll do manually);

And to use JavaScript to:

  1. check if product-element exists in HTML by ID;
  2. change the price if exists;
  3. if not then check another product from the list;
  4. change the price if exists;
  5. if not then stop checking.

Here i need your help to create a JS function.

If it's possible please use the elements and prices mentioned above in your example so i could understand, i'd really appreciate it.

Many thanks.

Solution

  • Just loop and test.

    Solution if you have less spans than data

    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>

    Solution if you have more spans than data:

    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>