百度學院d16-練習筆記

本文主要是介绍百度學院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) };

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

最終代碼


//利用getElementsByTagNamevar 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('+')breakcase '减':formual('-');breakcase '乘':formual('*');breakcase '除':formual('/');break}}}function formual(o) { m = eval(num1.value + o + num2.value);output.innerHTML = m;  }