How can i get a unique id for every class items in this js

user_14755809 0
Viewed 302

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(/[\u00A0-\u9999<>\&]/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.

css html jquery javascript
2 Answers

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.

user_141682990 
// ...

  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.

user_36803310
Related