从列表项到不同位置的文本区域获取输入值

Question

我正在构建notes-app，我想实现一项功能，该功能使我可以单击包含单个注释的列表项，然后单击此li的值将在标题的标题和文本区域的标题上显示该消息的不同位置页。我将模块模式用于体系结构。我试图将具有该值的innerHtml添加到文本区域，但是它不起作用。我在UIcontroller中具有editNote函数，该函数具有该innerHTML功能，appController具有inclick事件处理程序所在的init函数，以及用于调用editNote函数的ctrlEditNote。

codepen.io/kam773/pen/zmyaZB

/* notes controller*/
var notesController = (function() {

var Note = function(id, title, message) {
    this.id = id;
    this.title = title;
    this.message = message;
};

var notes = [];   
return {
    addItem: function(title, message) {
        var newNote, ID;

        // Create new ID
        if(notes.length > 0) {
            ID = notes[notes.length - 1].id + 1;
        } else {
            ID = 0;
        }

        // Create new item
        newNote = new Note(ID, title, message);

        // Add note to your data structure
        notes.push(newNote);

        return newNote;

    },
};
})();


/* UI controller */
var UIcontroller = (function() {

    var DOMStrings = {
        title: '.note-title',
        message: '.message',
        btnSave: '.btn-save',
        notesContainer: '.notes',
        deleteBtn: '.btn-delete',
        note: '.note',

    }

    return {
        getInput: function() {
            return {
                title: document.querySelector(DOMStrings.title).value,
                message: document.querySelector(DOMStrings.message).value,
            };
        },

        getDOMstrings: function() {
            return DOMStrings;
        },

        addListItem: function(obj) {
            var markup, element;

            markup = `<li class="note list-group-item id="note-0">
                            <h3 class="note-title">${obj.title}</h3>
                            <div class="horizontal-line"></div>
                            <p class="note-detail">${obj.message}</p>        
                      </li>`;

            document.querySelector(DOMStrings.notesContainer).insertAdjacentHTML('beforeend', markup);
        },
        clearFields: function() {
            var fields, fieldsArr;

            fields = document.querySelectorAll(DOMStrings.title + ', ' + DOMStrings.message);

            fieldsArr = Array.from(fields);

            fieldsArr.forEach((current, index, array) => {
                current.value = "";
            });
        },
        editNote: function(obj) {

            document.querySelector('.message').innerHTML = `<p class="note-detail">${obj.message}</p>`;

        }
    }

})();

/* general app controller */
var appController = (function(notesCtrl, UICtrl) {



    var init = function() {
        var DOM = UICtrl.getDOMstrings();
        document.querySelector(DOM.btnSave).addEventListener('click', ctrlAddItem);
        document.querySelector(DOM.note).addEventListener('click', ctrlEditItem);

    };

    var ctrlAddItem = function() {
        var input, newItem;

        input = UICtrl.getInput();

        if(input.title && input.message !== "" && input.title.length && input.message.length > 3) {

            newItem = notesCtrl.addItem(input.title, input.message);

            UICtrl.addListItem(newItem);

            UICtrl.clearFields();

        }

    };

    var ctrlEditItem = function() {

        UICtrl.editNote();


    };

    var ctrlDeleteItem = function() {



    };

    return {
        init: function() {
            init();
        }
    }


})(notesController, UIcontroller);

appController.init();