如何在 Javascript 中創建靈活的輸入字段？

Question

我在創建以下情況時遇到問題：

我想創建輸入字段，我可以在其中以任何順序寫入“1”、“2”或“3”，但每個數字只允許寫入一次。

重復這三個數字之一並在輸入字段中寫入除這三個數字之外的其他數字應該被認為是不好的。

我需要在代碼中添加什么？

 a = 1 b = 2 c = 3 L = a L = b L = c function F1() { feedBack = document.getElementById("feedBack"); an = document.getElementById("userAnswer"); L = document.getElementById("L").textContent; if (an == L) { feedBack.textContent = "good"; } else { feedBack.textContent = "bad"; } }

 <input id="userAnswer" type=text> <input id="userAnswer" type=text> <input id="userAnswer" type=text> <button onclick="F1()">check</button> <label id="L"> </label> <p id="feedBack"> </p>

Answer 1

您可以嘗試遍歷輸入元素，然后驗證每個元素，在循環中將輸入的值保存在每個輸入的集合/數組中，這樣我們就有了一個緩存來檢查輸入字段值。

 function validate() { let numberEntered = new Set(); let allowedValues = [1, 2, 3]; let inputStatus = false; let feedBack = document.getElementById("feedBack"); let inputEle = document.querySelectorAll(".number-field"); for (let input of inputEle) { let value = parseInt(input.value); if (allowedValues.includes(value) && !numberEntered.has(value)) { numberEntered.add(value) } else { inputStatus = true; break; } } if (inputStatus) { feedBack.textContent = "Bad"; } else { feedBack.textContent = "good"; } }

 <input id="userAnswer1" class="number-field" type=text> <input id="userAnswer2" class="number-field" type=text> <input id="userAnswer3" class="number-field" type=text> <button onclick="validate()">check</button> <label id="L"> </label> <p id="feedBack"> </p>

Answer 2

值得一提的是（特別是對於閱讀本文的 JavaScript 新手），與大多數編程問題一樣，有很多方法可以正確滿足原始問題的要求。

我知道這不是Code Review.SE ，但如果您有興趣，您可能會從對您提供的示例的一些反饋中受益：

1. 變量a 、 b和c從未以任何特別有用的方式使用，並且會降低代碼的可讀性。 您可能應該完全刪除他們的聲明。
2. 您連續三次設置變量L 考慮到一旦F1()被執行， L也會被覆蓋，這根本沒有多大作用。 您可能應該完全刪除這些不必要的分配。
3. HTML 規范明確規定ID值在整個document空間中應該是唯一的； 其他任何東西都是無效的，可能會導致頭痛和未記錄的行為，尤其是當 JavaScript 發揮作用時。 在簡化的示例中，實際上根本不需要為它們分配ID （請參閱解決方案）。
4. 相對較小，但內聯事件處理（即使用onclick屬性）通常被認為是一個過時的概念。 相反，使用addEventListener()范例使您的代碼更易於解釋和調試。
5. 函數名稱F1()並沒有特別描述函數在調用時實際執行的操作。 如果該方法被命名為更具描述性的名稱，例如validateForm() ，或者甚至只是validate() ，那么維護您的代碼的未來開發人員將更容易辨別該方法的作用。

---

為了滿足您的要求，您可能希望編寫更類似於我在下面得到的內容。 簡而言之，當運行validate()函數時，會執行以下操作：

1. 實例化validNumbers ，一個要針對字段進行驗證的有效輸入數組。
2. 實例化inputFields ，其計算結果為可循環的NodeList可迭代對象。
3. 實例化feedbackElement ，一個對 DOM 中<p>節點的引用。
4. 循環所有inputFields ，並檢查當前field的值是否在validNumbers數組中。
5. 如果驗證成功，代碼會從validNumbers數組中刪除有效值（因為它已經被使用並且不能再次使用）並繼續驗證下一個字段。
6. 如果驗證不成功，代碼會自動將您的反饋元素的文本設置為"bad"並退出驗證循環。
7. 驗證所有三個輸入字段后，代碼會檢查是否還有validNumbers任何剩余元素。 如果有，則並非所有元素都被使用，並且反饋再次設置為"bad" 。 否則，驗證將被檢出並且反饋元素的內容被設置為"good" 。

 function validate() { var validNumbers = [1, 2, 3]; var inputFields = document.querySelectorAll("input[type='text']"); var feedbackElement = document.querySelector("p#feedBack"); for (field of inputFields) { var fieldValue = parseInt(field.value); if (validNumbers.includes(fieldValue)) { // valid number & not encountered yet validNumbers.splice(validNumbers.indexOf(fieldValue), 1); } else { // invalid number or already used feedbackElement.innerText = "bad"; break; // break out of `for` loop, as there's already no possible way for the provided numbers to be "good" } } if (validNumbers.length === 0) { // all numbers were used feedbackElement.innerText = "good"; } else { // not all numbers were used feedbackElement.innerText = "bad"; } } document.querySelector("button").addEventListener('click', function() { validate(); });

 <input type=text> <input type=text> <input type=text> <button>check</button> <p id="feedBack"> </p>