时间戳

首页 > 解决方案 > 如何在 Javascript 中创建灵活的输入字段？

javascript - 如何在 Javascript 中创建灵活的输入字段？

问题描述

我在创建以下情况时遇到问题：

我想创建输入字段，我可以在其中按任意顺序写“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>

标签： javascript

解决方案

您可以尝试遍历输入元素，然后验证每个元素，在循环中将输入的值保存在每个输入的集合/数组中，这样我们就有了一个缓存来检查输入字段的值。

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>

推荐阅读