JavaScript DOM: Exercise-2 with Solution｜官方解法解析+jQuery解法
前言：原本是寫劇評心得的medium，時隔多日也沒再更新，因為都更新到我的wordpress了XD如果還是想看劇的話還是追蹤我的IG比較好哈哈哈哈，這裡以後應該會多更新一些前端技術筆記，真的很不好意思因為影劇訂閱我的人哈哈哈ㄏ。練習題來源與官方解法：https://www.w3resource.com/javascript-exercises/javascript-dom-exercise-2.php
Write a JavaScript function to get the values of First and Last name of the following form.
寫一個可以得到表單中姓名的JS程式。
官方解法
這次練習的是JavaScript DOM第二題，官方解法寫得有點難懂，還有用黑魔法🪄先來看看官方解法：
題目說明短短一句，但整個官方解法就看不懂了！官方解法的呈現是這樣，點下submit後會印出姓名，並且立刻跳轉頁面。
HTML
<form id=”form1" onsubmit=”getFormvalue()”>
First name: <input type=”text” name=”fname” value=”David”><br>
Last name: <input type=”text” name=”lname” value=”Beckham”><br>
<input type=”submit” value=”Submit”>
</form>
</body>在 <form> 裡面，如果有個 <input type=”submit”> 的按鈕，那麼使用者按下這個按鈕之後，會自動觸發 submit 事件，也就是後面的getFormvalue()函式。
JS：
function getFormvalue()
{
var x=document.getElementById(“form1”);
for (var i=0;i<x.length;i++)
{
if (x.elements[i].value!=’Submit’)
{
console.log(x.elements[i].value);
}
}
}宣告函式getFormvalue()宣告x，用來取得html中id="form1"的DOM物件。
迴圈？
for (var i=0;i<x.length;i++)
{
if (x.elements[i].value!=’Submit’)
{
console.log(x.elements[i].value);
}
}這段迴圈的意思是：如果有多個input，一個一個document.getElementById會很麻煩；x代表的是前面取得的DOM物件（這裡是#form1），elements用來取得#form1中input取得的值並轉為物件。
參考資料：HTMLFormElement.elements
現在取得的input物件，會包含 <input type=”submit” value=”Submit”>（這個按鈕被包在form1中），x.elements[i].value!=’Submit’ 用這一句排除按鈕，取得其他input，並且console.log他。
怎麼印在網頁上的？
後來我看半天程式碼，都不懂他也沒有append，為什麼可以印在網頁上？感謝學長 邱繼緯 幫我解惑，原來是黑魔法🪄
codepen中他引入了另一段codepen：
這段codepen就是會把console.log印在網頁上的程式碼。
至於為什麼他點完submit後印完姓名會跳錯誤，是因為form元素中的submit接收完資料，必須在後端填另一個要跳轉的url，但我們沒有設定，所以就會報錯說沒有那一頁。
個人覺得這個官方解法用submit真的頗麻煩，也許是為了練習submit，但要是我我就會用click就好。
jQuery+沒有用魔法🪄解法
好的因為我不喜歡在html下onsubmit的作法，也不想要w3school的黑魔法🪄，又因為懶惰所以想用jQuery：
我將input都設定id，並且多新增一個<span>來裝要印出來的地方。
<form id=”form1">
First name: <input type=”text” name=”fname” value=”David” id=”firstName”><br>
Last name: <input type=”text” name=”lname” value=”Beckham” id=”lastName”><br>
<input type=”submit” value=”Submit”>
<br>
<span id=”result”></span>
</form>JS的部分就跟我之前寫的一樣（會了append就拼命用XD）：當submit後執行函式，宣告和firstNameValue和lastNameValue的value，再把這兩個value貼到<span>那邊。
$(“#form1”).submit(function () {
var firstNameValue = $(“#firstName”).val();
var lastNameValue = $(“#lastName”).val();
$(“#result”).append(`${firstNameValue} ${lastNameValue}`);
});do re mi sol~又寫出來ㄌ🤪
