JS 實作 #15 | UI 最後調整;DOM.classList.toggle()、addEventListener(‘change’)

最後一小節是當選擇 + 或 – 時,對應的修改輸入的三個 input 外框與按鈕顏色。

開始實作

1. 所有的 event 事件都在放在 GLOBAL APP CONTROLLER 裡,所以我們要新增一個 change event,當它啟用時呼叫一個新的 UI CONTROLLER公開方法 changedType

// UI CONTROLLER
var UIController = (function() {
			...
        **changeType: function() {
            //to do
        }**
    };

})();
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        var DOM = UICtrl.getDOMstrings();
        document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);
        document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                ctrlAddItem();
            }
        });
        
        document.querySelector(DOM.container).addEventListener('click', ctrlDeleteItem);
				**document.querySelector(DOM.inputType).addEventListener('change', UICtrl.changedType);**

    };
    ...
})(budgetController, UIController);

controller.init();

2. 完成 changeType() 內容,使用 toggle 來新增移除要增加的 DOM class 名稱。

// UI CONTROLLER
var UIController = (function() {
			...
        changeType: function() {
            **var fields = document.querySelectorAll(
                DOMstrings.inputType + ',' +
                DOMstrings.inputDescription + ',' +
                DOMstrings.inputValue
            );

            nodeListForEach(fields, function(cur){
                cur.classList.toggle('red-focus');
            });
            document.querySelector(DOMstrings.inputBtn).classList.toggle('red');**
        }
    };

})();

目前為止就完成了整個預算小程式的練習。畫成程式架構圖如下:

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.