Добавление прослушивателя событий в процедурно назначенный атрибут в одностраничном приложении - PullRequest
Новая
       31

Добавление прослушивателя событий в процедурно назначенный атрибут в одностраничном приложении

0 голосов
/ 13 июня 2019

Я пишу одностраничную заметку на JavaScript без библиотек. Приложение позволяет пользователю добавлять заметки и отображает сокращенную форму под вводом.

Когда они хотят увидеть полный текст своей заметки, они могут щелкнуть соответствующую заметку, чтобы развернуть ее.

Пока что входные заметки сохраняются в массиве, а затем записываются в сокращенной версии (представленной в элементах списка HTML), которой назначена позиция массива в качестве идентификатора (назначение переменной индекса в качестве длины массива - 1, затем установите его в качестве атрибута)

Код просмотра 

  <html lang="en">
    <head>
      <script src='./note.js'></script>
      <script src='./controller.js'></script>
      <title>JS Notes</title>
    </head>

    <body>

      <h1 id="title">JS Notes</h1>


      <textarea id="input"></textarea><br>
      <button id="create">Create</button>

      <ul id="note area"></ul>


    </body>
  </html>

Код контроллера 

window.onload = function() {
  var note, createButton;
  note = new Note;

  createButton = document.getElementById("create")
  createButton.addEventListener("click", processNote)

  function processNote(){
    var input, output, index, newLI;

    input = document.getElementById('input').value;
    note.addNote(input);
    index = note.showFullNote().length - 1
    document.getElementById('input').value = ""
    newLI = document.createElement('li');
    newLI.setAttribute("id", index)
    output = input.substring(0,20)
    newLI.appendChild(document.createTextNode(output + "..."))
    document.getElementById('note area').appendChild(newLI)
  }

Модель для обработки заметок 

(function(exports) {
    function Note() {
        this._list = new Array;
    };

    Note.prototype.addNote = function(input) {
        this._list.push(input)
    };

    Note.prototype.showFullNote = function() {
        return this._list
    };

    exports.Note = Note;
})(this);

Я пытался добавить прослушиватель событий для нажатия на элемент списка и передачи идентификатора этого элемента в качестве номера индекса.

Я думал, что это может быть сделано с помощью getElementsByTag, но я не уверен, как тогда взять индекс специально выбранного элемента списка, а не первый элемент списка на странице.

1 Ответ

0 голосов
/ 13 июня 2019

Все, что вам нужно сделать, это добавить прослушиватель событий к элементу li, прежде чем добавлять его в область заметок. 

newLI.addEventListener('click', function(e) {
  let elementId = e.id;
  // any other logic here
})
...