Question

我有这种注册表单，包含不同类型的字段。以下代码用于名称字段，当名称包含3个以上字符时，边框和字段的某些图标将变为绿色。我的问题是我应该如何修改下拉字段的代码（选择和选项）以将字段的边框和图标变为绿色？我几乎没有尝试这样做，但我做不到。

姓氏字段：

surname.onkeyup = function() {
  // Validate length
  if(surname.value.length >= 3) {
  // GREEN
     document.getElementById("surname").style.border = "1px solid #7ed321";
     document.getElementById("surname").style.color = "#7ed321";
     document.getElementById("icon-surname").style.color = "#7ed321";
     surname.onblur = function() {
         document.getElementById("surname").style.border = "1px solid #7ed321";
         document.getElementById("surname").style.color = "#000000";
         document.getElementById("icon-surname").style.color = "#7ed321";
     }
  } else {
  // RED
     document.getElementById("surname").style.border = "1px solid #bc0909";
     document.getElementById("surname").style.color = "#bc0909";
     document.getElementById("icon-surname").style.color = "#bc0909";
     surname.onblur = function() {
         document.getElementById("surname").style.border = "1px solid #bc0909";
         document.getElementById("surname").style.color = "#000000";
         document.getElementById("icon-surname").style.color = "#bc0909";
     }
   } 
 }

县场（下拉列表）：

     <select class="judet" id="judet">
        <option disabled selected value> -- Selectați Județul -- </option>
        <option value="Alba">Alba</option>
        <option value="Arad">Arad</option>
        <option value="Arges">Argeș</option>
        <option value="Bacau">Bacău</option>
        <option value="Bihor">Bihor</option>
     </select>
     <div class="input-icon"><i id="icon-judet" class="fas fa-map-marker"></i></div>


    judet.onkeyup = function() {
        var judet = document.getElementById("judet").selectedIndex;
        if(judet) {
           // GREEN
           document.getElementById("judet").style.border = "1px solid #7ed321";
           document.getElementById("icon-judet").style.color = "#7ed321";
           judet.onblur = function() {
               document.getElementById("judet").style.border = "1px solid #7ed321";
               document.getElementById("judet").style.color = "#000000";
               document.getElementById("icon-judet").style.color = "#7ed321";
           }
        } else {
           // RED
           document.getElementById("judet").style.border = "1px solid #bc0909";
           document.getElementById("icon-judet").style.color = "#bc0909";
           judet.onblur = function() {
               document.getElementById("judet").style.border = "1px solid #bc0909";
               document.getElementById("judet").style.color = "#000000";
               document.getElementById("icon-judet").style.color = "#bc0909";
           }
        } 
    }

为什么第二种不起作用而且不改变它的颜色而第一种是有效的？谢谢你的建议！

Answer 1

这里有一个以上的问题。但是为了符合SO标准，我将回答你提出的问题。

从您提供的代码段看来，第二个无效的原因是因为变量judet在用于分配{{}时未定义1}}事件处理程序。如上所述，第一行上不存在onkeyup，因此永远不会分配事件处理程序。

要解决此问题，您似乎需要颠倒这两行代码的顺序：

judet

像这样：

judet.onkeyup = function() {
    var judet = document.getElementById("judet").selectedIndex;

var judet = document.getElementById("judet").selectedIndex; judet.change = function() {已得到认可，并且可以正常使用。

==

与您的问题无关，为DOM属性分配和事件处理程序很麻烦。请将事件处理程序更改为judet元素。其次，在<select>元素上使用的适当事件处理程序是<select>事件。这将适当地捕获键盘和指针事件。供您考虑。

Javascript onkeyup / onblur

1 个答案: