我怎样才能为这个 js 中的每个类项目获得一个唯一的 id

Question

Here is a text, and when we add content through the textbox, then every new line adds into a new div class with quiz in inner div.

Just Like This:

<div id="inner">
<div class="quiz">this is line one</div>
<div class="quiz">this is second line</div>
<div class="quiz">this is third line</div>
<div class="quiz">and so on...</div>
</div>

But I want to add a unique id in the "n" Number series from "1" on every quiz class Just Like this output I want when we add content through this textbox. Like That:

<div id="inner">
<div id="1" class="quiz">this is line one</div>
<div id="2" class="quiz">this is second line</div>
<div id="3" class="quiz">this is third line</div>
<div id="4" class="quiz">and so on...</div>
</div>

My Whole Code is:

 const sendButton = document.getElementById('send-btn'); const textArea = document.getElementById('input'); const innerDiv = document.getElementById('inner'); var message = textArea.value; sendButton.addEventListener('click', function() { // split the textarea entries into an array let lines = (textArea.value).split("\\n"); // iterate over each line, creating a div/span and inserting into the DOM lines.forEach( (line) => { let encodedLine = encodeHtmlEntity(line); let newElement = `<div class="quiz">${encodedLine}</div>`; innerDiv.innerHTML += newElement; }); // reset the textarea textArea.value = ''; }); function encodeHtmlEntity(input) { var output = input.replace(/[\ -\香<>\\&]/gim, function(i) { return '&#' + i.charCodeAt(0) + ';'; }); return output; }

 <div id="inner"> </div> <br> <textarea class="input" id="input" placeholder="Message..."></textarea><br> <button class="waves-effect waves-light" id="send-btn">Add Content</button>

What some new lines of code I need to write, anyone can help me.

Answer 1

you can use something like counter to count IDs and attach it to your elements. this is your code above with some changes:

  let counter = 0;

  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div id="${counter++}" class="quiz">${encodedLine}</div>`;
    innerDiv.innerHTML += newElement;
  });

let me know if it works for you.

Answer 2

// ...

  let id = 0; // *** Or whatever you want to start with
  let index = 0; // In case you want to use an array of string values, instead, like this:
  let ids = ['first-id', 'second-id', 'third-id', 'etc...']; // Must match lines

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    
    // You can set id here
    // id++; // Or you could increment by whatever you want
    // 
    // id = id + 5; // Or you could use an array of arbitrary values
    // 
    // id = list_of_ids[index++]; // increment index
    // 
    // or...
    
    let encodedLine = encodeHtmlEntity(line);

    let newElement = `<div class="quiz" id="${id++}">${encodedLine}</div>`; // <-- *** Add id and increment
    innerDiv.innerHTML += newElement;
  });

// ...

Lines marked with "***" are really the only ones needed.