javascript - 我怎样才能为这个 js 中的每个类元素获得一个唯一的 id

Question

这是一个文本，当我们通过文本框添加内容时，每一个新行都会添加到一个新的 div 类中，其中 quiz在 inner分区
就这样:

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

但是我想在每个测验类的“1”的“n”数字系列中添加一个唯一的 id 就像当我们通过这个文本框添加内容时我想要的这个输出。
像这样:

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

我的全部代码是:

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>

我需要写一些新的代码行，任何人都可以帮助我。

Answer 1

您可以使用诸如 counter 之类的东西来计算 ID 并将其附加到您的元素上。这是你上面的代码，有一些变化:

  let counter = 0;

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

请让我知道这对你有没有用。