Associating Multiple IDs in HTML CSS to Script/Javascript

Question

From SO threads Does ID have to be unique in the whole page? and Is multiple ids allowed in html and javascript? thread, I understand that while HTML/CSS may not allow for same ID to be linked to Javascript/Script on a webpage.

However, I am looking for an efficient & less complicated solution than simply copying over the large-sized Javascript and adding a progressive number to each id.

I have this submit button with a spinner:

<button class="submit-button" id="SubmitButton">
    <div class="spinner hidden" id="spinner"></div>
    <span id="buttonText">Submit Now</span>
</button>

and that is linked to a LARGE_SIZED SCRIPT as follows:

<script>

const myConst = MyNUM('<?php echo SOME_DETAILS; ?>');

// Select submit button
const subBtn = document.querySelector("#SubmitButton");

// Submit request handler
.......
.......
.......
// Several hundred lines of script code, 
// including functions and other processing logic for spinners and whatnot
.......
.......
</script>

I need to have multiple such SubmitButton on the same webpage, so one way is to suffix the id with an incrementing number (like id="SubmitButton1", id="SubmitButton2" and so on)

and copy-paste the same <script></script> part for each button id.

However, that will make the webpage very bulky and lengthy.

Is there any way to use minimal code without repeating the whole block again and again, yet achieve the desired (multiple submit buttons)?

*copying over the large-sized Javascript and adding a progressive number to each id.*" why not use classes? Or any other way of looking up the items? — VLAZ, Aug 23 '22 at 07:16

mplungjan · Accepted Answer · 2022-08-23T08:10:02.567

You really should delegate. If you then navigate the DOM of the target using the class names, then you have no need of IDs

document.addEventListener("click", function(e) {
  const tgt = e.target.closest("button");
  if (tgt.matches(".submit-button")) {
    const spinner = tgt.querySelector("div.spinner");
    tgt.querySelector("span.buttonText").hidden = true;
    spinner.hidden = false;
    console.log(spinner.textContent)
  }
})

<button class="submit-button">
  <div class="spinner" hidden>Spinner 1</div>
  <span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
  <div class="spinner" hidden>Spinner 2</div>
  <span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
  <div class="spinner" hidden>Spinner 3</div>
  <span class="buttonText">Submit Now</span>
</button>

score 0 · Answer 2 · edited Aug 23 '22 at 08:03

Maybe this helps.

// Get all elements with the same class in an array
const submitButtons = document.getElementsByClassName("submit-button") // or document.querySelectorAll(".submit-button");

// Loop through the array
for (let i = 0; i < submitButtons.length; i++) {
  // Get each individual element including the element's children
  const submitButton = submitButtons[i]
  const spinner = submitButton.querySelector(".spinner");
  const submitText = submitButton.querySelector(".buttonText");

  console.log(submitButton, spinner, submitText)
}

// if you want a specific button you use the index
console.log(submitButtons[3])

<button class="submit-button">
      <div class="spinner hidden"></div>
      <span class="buttonText">Submit Now</span>
    </button>
<button class="submit-button">
      <div class="spinner hidden"></div>
      <span class="buttonText">Submit Now</span>
    </button>
<button class="submit-button">
      <div class="spinner hidden"></div>
      <span class="buttonText">Submit Now</span>
    </button>
<button class="submit-button">
      <div class="spinner hidden"></div>
      <span class="buttonText">Submit Now</span>
    </button>
<button class="submit-button">
      <div class="spinner hidden"></div>
      <span class="buttonText">Submit Now</span>
    </button>

How will this work on click? – mplungjan Aug 23 '22 at 08:01 — mplungjan, Aug 23 '22 at 08:01

Associating Multiple IDs in HTML CSS to Script/Javascript

2 Answers2