百度學院d16-練習筆記

目標:点对应按钮的时候，将两个输入框中的数字做对应的算术，并将结果显示在id为result的p标签内。

最初代碼

						      var num1 = document.querySelector('#first-number')
                              var num2 = document.querySelector('#second-number')
                              var plus = document.querySelector('#add-btn')
                              var minus = document.querySelector('#minus-btn')
                              var multip = document.querySelector('#times-btn')
                              var divide = document.querySelector('#divide-btn')
                              var output = document.querySelector('#result')

   //直接獲取按鈕的值為string類型，要轉為數字型才能進行運算，此處用了隱式轉換

plus.onclick = function () {output.innerHTML = (num1.value * 1) + (num2.value * 1)};
minus.onclick = function () { output.innerHTML = (num1.value * 1) - (num2.value * 1) } ;
multip.onclick = function () {   output.innerHTML = (num1.value * 1) * (num2.value * 1) };
divide.onclick = function () { output.innerHTML = (num1.value * 1) / (num2.value * 1) };

最初的代碼式一步一步實現的並沒有太多關於優化，複讀性，維護性等等雜七雜八的因素，因為我是初學者因此先求有再求好。完成以後發現這樣的代碼如果以後再增加運算符的話也得增加表達式函數，對日後的維護性不太高，因此模仿了大神製作的計算機項目以後，寫出了更簡潔的代碼。

最終代碼

//利用getElementsByTagName
							var num1 = document.querySelector('#first-number');
                            var num2 = document.querySelector('#second-number');
						  	var btn = document.getElementsByTagName('button')
								
	for (let i = 0; i <= btn.length - 1; i++) {
        btn[i].onclick = function () {
               switch (this.innerHTML) {
                           case '加':
                               formual('+')
                               break
                           case '减':
                               formual('-');
                               break
                           case '乘':
                               formual('*');
                                break
                           case '除':
                               formual('/');
                                break
											}
                                        }
									}
           function formual(o) { m = eval(num1.value + o + num2.value);
						         output.innerHTML = m;  }

其中最讓人頭疼得部分就是運算子無法直接傳送給函數，而是要用字符串的型是才能當作參素傳送，但這樣又不能進行運算了，參考大神的代碼發現了eval()的用法!!

eval()

eval 函數可以執行某一段字串（String）的運算，如果該字串是運算式，則 eval
會計算出運算結果，如果只是單純數個字串的連接，eval 會自動返回組和好的整個字串，

結尾:

第一次寫筆記，希望能持之以恆把百度課程練習完!!!chart.js/