我正在用 JavaScript 編寫一個(gè)沒(méi)有庫(kù)的單頁(yè)筆記應(yīng)用程序。該應(yīng)用程序允許用戶添加注釋,并在輸入下方顯示一個(gè)縮短的表單。當(dāng)他們想查看筆記的全文時(shí),他們可以單擊相關(guān)的筆記將其展開(kāi)。到目前為止,輸入的筆記都保存在一個(gè)數(shù)組中,然后寫成一個(gè)簡(jiǎn)短的版本(在 HTML 列表元素中呈現(xiàn)),其中將數(shù)組位置分配給它們作為 ID(分配一個(gè)索引變量作為數(shù)組長(zhǎng)度 -1,然后將其設(shè)置為屬性)視圖代碼是 <html> <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) }處理票據(jù)的模型(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);我試圖添加一個(gè)用于單擊列表元素的事件偵聽(tīng)器,并將該元素的 id 作為索引號(hào)傳遞。我認(rèn)為這可以由 完成getElementsByTag,但我不確定如何獲取專門單擊的列表項(xiàng)的索引,而不是頁(yè)面上的第一個(gè)列表項(xiàng)。
向單頁(yè)應(yīng)用程序上按程序分配的屬性添加事件偵聽(tīng)器
慕哥6287543
2021-06-30 06:07:21