優化器的 JavaScript：使用輸入字段

想要測試的不僅僅是按鈕的顏色嗎？ 然後，您需要學習 JavaScript。 我開始了一個系列，涵蓋了您可以使用 JavaScript 在您的網站上設置獲勝實驗的實用分步方法。

該系列中的每篇文章都涵蓋了一種不同的 JavaScript 方法，並通過將最佳實踐作為假設案例應用於網站來進行說明。

商業案例：優化輸入字段以改善用戶體驗

本章的假設案例是關於使用輸入字段來改善用戶體驗。

研究表明，用戶往往會發現選擇加入表單令人沮喪。 為了減輕影響，我們確定了我們想要更改的特定輸入字段。

在這個假設場景中，我們得出以下假設：

為了檢驗這個假設，我們將應用以下更改：

實驗中使用的代碼

現在是有趣的部分！

為了執行更改，我們在測試頁面上運行以下 JavaScript 代碼。 親自嘗試一下，看看它的實際效果！

 var testForm = document.querySelector(".testForm");
var firstNameInput = testForm.childNodes[3];
var emailInput = testForm.childNodes[8];
var maleRadio = document.getElementById("male");
var femaleRadio = document.getElementById("female");
var rangeSlider = document.getElementsByClassName("slider");
var googleSelector = document.getElementById("google");

函數 addPlaceholder(inputField, placeHolderText) {
  inputField.setAttribute("佔位符", placeHolderText);
}
addPlaceholder(firstNameInput, "Jeroen");
addPlaceholder(emailInput, "[email protected]");

函數 changeRadioSelection(oldButton, newButton) {
  oldButton.removeAttribute("選中");
  newButton.setAttribute("checked", "checked");
}
changeRadioSelection(maleRadio, femaleRadio);

功能變化範圍值（範圍，值）{
  range[0].setAttribute("value", value);
}
變化範圍值（範圍滑塊，“50”）；

函數 addExtraSelectOption(selectDiv, optionName, optionValue) {
  var newOption = document.createElement("OPTION");
  var newOptionNode = document.createTextNode(optionName);
  newOption.appendChild(newOptionNode);
  newOption.setAttribute("值", optionValue);
  selectDiv.appendChild(newOption);
}
addExtraSelectOption(googleSelector, "Google 電子表格", "gs");

守則細目

1. 新語法

分解首先回顧了上面示例中的所有新語法。 由於本文是系列文章的一部分，因此請務必查看之前文章中語法的完整文檔。

.childNodes[index] 是一個返回子節點數組的屬性。 您可以使用索引訪問數組中的特定節點。 數組中的節點元素從數字零開始。 訪問數組中的第一個節點需要您在括號之間放置一個 0。

您可以使用此屬性而不是 CSS 選擇器來選擇子節點。 使用此屬性的另一個好處是選擇文本節點。

這是一個例子：

ChildNodes[0] 選擇 H1 元素並將其子元素收集到一個數組中。 它返回以下數組：

 [子節點，子節點2，子節點3]

H1 中唯一的孩子是文本本身。 H1 的文本位於索引 0 處。文本節點由屬性返回。

document.getElementById(id) 是一種返回具有匹配 id 屬性的元素的方法。 您需要將 id 作為字符串傳遞。 此示例是 querySelector 方法的簡單版本。 您可以將此方法用於單個 id。

如果您有 querySelector 方法，您可能會問自己為什麼會存在這種情況。 之所以存在此方法，是因為 JavaScript 的創建者在早期版本的 JavaScript 中添加了 getElementById 方法。 創建者後來添加了 querySelector 方法，以便更輕鬆地選擇元素。

雖然大多數瀏覽器都支持 querySelector 方法，但它可以幫助檢查大多數瀏覽器是否支持它們。

不受支持的代碼可能會破壞舊瀏覽器上的網站。 一個檢查 JavaScript 方法的優秀網站是 caniuse.com。

document.getElementsByClassName(class) 是一種返回整個文檔中具有特定類的所有元素的方法。 您需要將類作為字符串傳遞。 它返回數組中的元素。

您還可以用另一個元素替換文檔，因此它只查看選擇的子元素。 這種方法真的很有幫助，因為它更有效。 如果使用文檔對像作為選擇，則需要檢查整個文檔。

就像 childNodes 方法一樣，它會返回一個匹配的數組。

.removeAttribute(attribute) 是一種從元素中刪除屬性的方法。 您將刪除附加到屬性的值。

當元素沒有該屬性時，它將執行該方法而不會出錯。 您需要將屬性作為字符串傳遞。

2. 邏輯

 var testForm = document.querySelector(".testForm");

在這行代碼中，我們將表單分配給 testForm 變量。 我們通過使用 querySelector 方法選擇 testForm 類來做到這一點。

 var firstNameInput = testForm.childNodes[3];

然後，我們將名字輸入字段分配給 firstNameInput 變量。 我們通過使用 childNodes 選擇器選擇第四個子節點來做到這一點。 注意第三個索引是第四個位置。

 var emailInput = testForm.childNodes[8];

在這裡，我們將郵件輸入字段分配給 emailInput 變量。 輸入字段是 testForm 變量的第 9 個節點。

 var maleRadio = document.getElementById("male");

在這一行中，我們為單選按鈕分配了值male。 我們使用 getElementById 方法簡單地通過 id 選擇它。

 var femaleRadio = document.getElementById("female");

然後我們使用 getElementById 方法將值為 female 的單選按鈕分配給 femaleRadio 變量。

 var rangeSlider = document.getElementsByClassName("slider");

在這裡，我們將帶有滑塊類的元素數組分配給 rangeSlider 變量。 我以這種方法為例，但只使用 querySelector 方法會更容易。

 var googleSelector = document.getElementById("google");

我們通過將類 google 的選擇輸入字段分配給我們的 googleSelector 變量來完成我們的變量。

 函數 addPlaceholder(inputField, placeHolderText) {

此函數將佔位符文本添加到文本輸入字段。 您可以將輸入字段作為第一個參數傳遞，並將佔位符文本作為第二個參數中的字符串傳遞。

 inputField.setAttribute("佔位符", placeHolderText);

您可以通過將 placeholder 屬性添加到輸入文本字段來顯示佔位符文本。 我們可以使用 setAttribute 方法添加這個屬性和值。

 }

花括號關閉了我們的第一個函數。

 addPlaceholder(firstNameInput, "Jeroen");

我們第一次調用該函數以將示例名稱作為佔位符添加到名字輸入字段。

 addPlaceholder(emailInput, "[email protected]");

我們再次調用該函數以將示例郵件地址添加到電子郵件輸入字段。

函數可以方便地捆綁代碼並使其他開發人員可以理解。 如果你有敏銳的眼光，你可能已經註意到我們可以完全跳過這個函數，只使用這兩行代碼：

 firstNameInput.setAttribute("佔位符", "Jeroen");
emailInput.setAttribute("佔位符", "[email protected]");

作為程序員，重要的是要注意何時需要創建函數並只使用簡單的一行。 這個例子可以為我節省三行代碼。 更少的代碼通常對加載速度更好。

 函數 changeRadioSelection(oldButton, newButton) {

第二個函數刪除舊單選按鈕的選擇並選擇一個新單選按鈕。 這樣，我們可以更改頁面加載時默認選中的按鈕。

 oldButton.removeAttribute("選中");

checked 屬性決定選中的單選按鈕。 當一個元素包含checked=”checked”時，它會在屏幕上顯示為checked。 我們使用 removeAttribute 方法來移除選中狀態。 我們在 oldButton 變量上調用它。

 newButton.setAttribute("checked", "checked");

然後我們只需將相同的屬性和值放入我們的 newButton 變量中即可更改默認選擇。

 }

這個花括號結束了我們的第二個函數。

 changeRadioSelection(maleRadio, femaleRadio);

我們調用該函數一次以將單選按鈕的默認值更改為女性。

在這裡，我們可以通過簡單地編寫以下代碼再次節省 2 行代碼：

 maleRadio.removeAttribute("選中");
femaleRadio.setAttribute("checked", "checked");

我喜歡使用函數，因為它可以讓我在未來快速擴展代碼。 例如，想像一下為 20 個帶有數組的按鈕執行此操作。

通過測試開發，我們知道我們的代碼通常是臨時的，所以在我看來，100% 的完美不是必需的。

 功能變化範圍值（範圍，值）{

此函數更改範圍滑塊的默認值。 您輸入範圍元素作為第一個參數。 第二個參數需要是一個字符串，其中包含範圍限制內的所需值。

我們知道範圍的限制是 50，因為它具有屬性 max=”50”。 它從 0 開始，因為它具有屬性 min=”0”。 您可以通過使用 setAttribute 方法使用 JavaScript 增加此限制。

 range[0].setAttribute("value", value);

我們使用 getElementsByClassName 方法選擇了範圍，這意味著我們需要選擇數組中的特定項來訪問它。 我們可以通過在變量後添加 [0] 來訪問數組中的第一項。 這行代碼將設置範圍的值屬性。

 }

這個大括號結束了第三個函數。

 變化範圍值（範圍滑塊，“50”）；

然後我們調用我們的函數將範圍的默認值更改為 50。

 函數 addExtraSelectOption(selectDiv, optionName, optionValue) {

此函數將一個選項元素附加到我們的下拉選擇框中。 在第一個參數中，您傳遞選擇元素。 這是所有選項元素的父級。

第二個參數將新選項的名稱作為字符串。 第三個參數將我們的新選項的值作為字符串。 該值通常在向後端發送數據時使用，因此必須使其成為一個簡單的值。 在這裡，我們可以看到我如何為所有選項添加短值首字母縮寫詞。

 var newOption = document.createElement("OPTION");

首先，我們使用 createElement 方法創建選項元素並將其分配給 newOption 變量。

 var newOptionNode = document.createTextNode(optionName);

然後我們使用 optionName 變量創建一個文本節點並將其保存到 newOptionNode 變量中。

 newOption.appendChild(newOptionNode);

我們將 newOptionNode 文本節點附加到我們的 newOption 變量中。

 newOption.setAttribute("值", optionValue);

然後我們使用 setAttribute 方法設置新選項的值。

 selectDiv.appendChild(newOption);

最後，我們將新選項附加到 selectDiv 變量中。 現在它將在 DOM 中可見。 因為我們附加了它，所以該選項將是下拉列表中的最後一個。

 }

花括號結束了我們的第四個函數。

 addExtraSelectOption(googleSelector, "Google 電子表格", "gs");

我們調用我們的函數將我們的新選項元素添加到我們的下拉列表中。

3. 運動

學習 JavaScript 的最好方法是嘗試一下。

我希望您使用 changeRadioSelection 來選擇其他選項。 我還希望您使用 changeRangeValue 方法將範圍的值更改為 0。 並給我留言，讓我知道你的想法！

想不通？ 在LinkedIn上給我發消息，我會幫你的！