JavaScript Basic: Exercise-10｜jQuery解法

前言：原本是寫劇評心得的medium，時隔多日也沒再更新，因為都更新到我的wordpress了XD如果還是想看劇的話還是追蹤我的IG比較好哈哈哈哈，這裡以後應該會多更新一些前端技術筆記，真的很不好意思因為影劇訂閱我的人哈哈哈ㄏ。

Drama Note影劇部落格

Drama Note Instagram

練習題來源與官方解法：https://www.w3resource.com/javascript-exercises/javascript-basic-exercise-10.php

Write a JavaScript program to calculate multiplication and division of two numbers (input from user).
寫一個可以加兩數相乘和相減的JS程式。

官方解法把onclick寫在html中，我朋友說不想這樣寫！於是我花了一點時間研究哈哈哈哈（對、我還很弱、所以能自己寫出來很開心XD）

先製作UI：

<form>        
      1st Number : <input type="text" id="firstNumber" />
<br>        
      2nd Number: <input type="text" id="secondNumber" />
<br>        
      <input type="button" id="multiply" Value="Multiply" />
      <input type="button" id="divide" Value="Divide" />
</form>
      <p>The Result is : 
      <br>
      <span id="result"></span>    
</p>

記得把要綁定的元件都綁上id。

JS：（我用jQuery寫）

$("#multiply").click(function () {
    var firstNumber = $("#firstNumber").val();
    var secondNumber = $("#secondNumber").val();
    var multiplyResult = firstNumber * secondNumber;
    $("#result").append(multiplyResult);});
$("#divide").click(function () {
    var firstNumber = $("#firstNumber").val();
    var secondNumber = $("#secondNumber").val();
    var divideResult = firstNumber / secondNumber;
    $("#result").append(divideResult);});

以乘法multiply為例

1. 抓按鈕$(“#multiply”)、抓事件.click
2. 宣告變數firstNumber
val()：取得在input輸入的內容
   secondNumber也是同理
3. 宣告新變數multiplyResult，讓firstNumber跟secondNumber相乘
4. 將相乘的結果multiplyResult添加到想加的地方：id=”result”的span那邊
   append()用來插入內容（也可以插入html，但這邊只要插入文字）
5. 除法也是一樣！

do re mi sol~自己寫出來真是太好了呢~