I have a javascript code inside a form, This javascript is supposed to put a bullet point to the previous line, every time that I press the 'enter' key. However, when I do press the enter key it does put the bullet point, but when I press the enter key again, an additional bullet appears. For instance, I have line 1, line 2, and line 3. When I type line one and press enter, a bullet appears behind line one, but when I type line 2 and press enter, line one suddenly has 2 bullets behind it and line 2 has a bullet added to it.

我在一个表单中有一段javascrip代码，每次我按回车键时，这个javascrip都会在前一行加上一个项目符号。然而，当我按Enter键时，它确实会放入项目符号，但当我再次按Enter键时，会出现一个额外的项目符号。例如，我有第一行、第二行和第三行。当我键入第一行并按Enter时，第一行后面会出现一个项目符号，但当我键入第二行并按Enter时，第一行后面突然有两个项目符号，而第二行则增加了一个项目符号。

This is the code:

代码是这样的：

// Function to format the "roles" textarea into bullet points
    document.addEventListener('keydown', function (e) {
        if (e.target.id === 'id_form-0-roles' && e.keyCode === 13) {
            formatRoles(e.target);
            e.preventDefault();

        }
    });

    function formatRoles(textarea) {
        let lines = textarea.value.split('\n');
        let formattedText = '';
        lines.forEach(function (line) {
            if (line.trim() !== '') {
                formattedText += '• ' + line.trim() + '\n';
            } else {
                formattedText += '\n'; // Add a new line for empty lines
            }
        });
        textarea.value = formattedText;
    }

</script>

I expect the javascript to put just one bullet point in the preceding line after the enter key is pressed, such that each line has a bullet point behind it. This is what I want:

我希望在按下Enter键之后，该脚本只在前一行中放入一个项目符号，这样每一行后面都有一个项目符号。这就是我想要的：

• line 1

  1号线

  
  



• line 2

  2号线

  
  



• line 3

  3号线

  
  

When formatRoles sets the value for lines, its splits the entire existing textarea text by the new lines. The bullet points are characters in the text area, so after typing the first line the result for array lines is ["• hello","world"] and then you append a bullet to each resulting in ["• • hello","• world","another new line"] and so on.

当FormatRoles设置行值时，它将用新行拆分整个现有文本区文本。项目符号是文本区域中的字符，因此在键入第一行之后，数组行的结果是[“·Hello”，“world”]，然后在每个项目符号后面加上一个项目符号，结果是[“··Hello”，“·world”，“Another new line”]，依此类推。

A solution for this would be looking at only the last line when adding the bullet.

解决此问题的方法是在添加项目符号时只查看最后一行。

// Function to format the "roles" textarea into bullet points
document.addEventListener("keydown", function (e) {
  if (e.target.id === "id_form-0-roles" && e.keyCode === 13) {
    formatRoles(e.target);
    e.preventDefault();
  }
});

function formatRoles(textarea) {
  let lines = textarea.value.split("\n");
  let formattedText = "";
  lines.forEach((line, i) => {
    if (i === lines.length - 1 && line.trim() !== "") { //only apply the bullet if its the last line and not empty.
      formattedText += "• " + line.trim() + "\n";
    } else {
      formattedText += line + "\n";
    }
  });
  textarea.value = formattedText;
}

<textarea id="id_form-0-roles" style="width: 400px;height:100px;"></textarea>