Associating Multiple IDs in HTML CSS to Script/Javascript-CodePudding

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  id="SubmitButton">
    <div  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)?

CodePudding user response：

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 >
  <div  hidden>Spinner 1</div>
  <span >Submit Now</span>
</button>
<button >
  <div  hidden>Spinner 2</div>
  <span >Submit Now</span>
</button>
<button >
  <div  hidden>Spinner 3</div>
  <span >Submit Now</span>
</button>

CodePudding user response：

Maybe you can do something like below:

document.addEventListener('click', (e) => {
  if(e.target.classList.contains('button')){
    e.target.innerText = 'run the big function/script';
  }
});

<div >
<button class=button>1</button>
<button class=button>2</button>
<button class=button>3</button>
<button class=button>4</button>
<button class=button>5</button>
<button class=button>6</button>
<button class=button>7</button>
</div>

CodePudding user response：

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 >
      <div ></div>
      <span >Submit Now</span>
    </button>
<button >
      <div ></div>
      <span >Submit Now</span>
    </button>
<button >
      <div ></div>
      <span >Submit Now</span>
    </button>
<button >
      <div ></div>
      <span >Submit Now</span>
    </button>
<button >
      <div ></div>
      <span >Submit Now</span>
    </button>