javascript - 如何使用 Vanilla JS 根据文本编辑器框中的行动态显示装订线中的行号？

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 6 年前。

Improve this question

我需要仅使用 vanilla JS 在应用程序的侧栏中打印出准确的行号。

当在可编辑文本区域添加和删除行时，行号必须自动增加和减少。

目前它正在创建新的 DIV，但新的 <code>标签会很壮观。不幸的是<code>标签在同一行上打印，而不是垂直递增。

我当前的代码如下所示:

html:

<div class="textBox" contenteditable>
  <code>
    This div can be edited in browsers that support HTML5.
  </code>
  <code>
    Please edit this text and add more lines to see what needs to happen.
  </code>
</div>

JS:

  let totalLines = 1;
    function updateGutter(allLines) {
      const toAdd = document.createDocumentFragment();

  for (let i = 0; i < allLines;) {
    i += 1;
    const newDiv = document.createElement('div');
    newDiv.id = 'r' + i;
    newDiv.className = 'ansbox';
    newDiv.innerHTML = `${i}.`;
    toAdd.appendChild(newDiv);
    document.getElementsByClassName('gutter')[0].appendChild(toAdd);
  }
}

function unEqual(linesTotal) {
  if (linesTotal !== totalLines) {
    totalLines = linesTotal;
    updateGutter(totalLines);
  }
}

const getLength = function getLength(element) {
  const linesTotal = element.querySelectorAll('div').length + 1;
  unEqual(linesTotal);
};

const box = document.querySelector('.textBox');
box.addEventListener('keyup', function() {
  getLength(box);
});

但它创建的输出如下所示:

我希望这更具解释性。 :-) * 另外还有更新的 FIDDLE https://jsfiddle.net/Tranq/heyaxtd5/4/ *

Answer 1

使用一些CSS Counters怎么样？魔法？

工作 fiddle :https://jsfiddle.net/heyaxtd5/2/

CSS:

pre
{
    counter-reset: thecodenumbering;
}

code
{
    counter-increment: thecodenumbering;
}
code:before
{
    padding-right:5px;
    content: counter(thecodenumbering);
}

HTML:

<pre>
    <code>A line of code</code>
    <code>A line of code</code>
    <code>A line of code</code>
    <code>A line of code</code>
    <code>A line of code</code>
</pre>

更新:

改变了一点你的JS，它似乎工作:https://jsfiddle.net/heyaxtd5/5/