页面加载而不是事件触发时如何执行JS？答案

【问题标题】：How to execute JS when page load instead of event trigger?页面加载而不是事件触发时如何执行JS？
【发布时间】：2019-07-09 10:22:49
【问题描述】：

我正在尝试提出一个 JS 来检测表单中空字段的数量。我有 3 个字段。如果 JS 统计了 2 个或更多的空字段，JS 会将 css 颜色更改为红色。如果 JS 计数为 1 个空字段，JS 会将 css 颜色更改为绿色。当我在输入字段中输入数据时，这工作正常。但是，当我加载已经在两个字段中的数据的页面时，颜色仍然保持红色。如何让JS在页面加载时检查输入框中是否已经存在值并根据空字段的数量相应地切换颜色？

以下是页面加载后显示红色，即使只有 1 个空字段。

我检查了所有论坛，但没有回答我的问题

'''HTML'''
<table>
<tr></tr><td> Field 1: <input class="user_field" type="text" name="1[user_fname]" value="1" autofocus/></td></tr>
<tr><td>Field 2: <input class="user_field" type="text" name="1[user_lname]" value="2"/></td></tr>
<tr><td>Field 3: <input class="user_field phone" type="text" name="1[user_mobile]"/></td></tr>
<tr><td>&nbsp;</td></tr>
</table>
<div id="result"></div>

<div class="containerbox">
        <div id="centerbox1" style="background-color: #FF6C60;">
          <div class="value">
          <p><span style="color: #fff ;font-weight:bold; font-size:36px">test</span></p>
          </div>
        </div>
     </div>
</div>


'''JS'''
$(document).ready(function(){
    $('.user_field').blur(function() {
            var text = "field(s) empty";
        var count = $('.user_field').not(function() {
            return this.value;
        }).length;

        $('#result').html(count + " " + text);

        //*alert(count);

        var udata = count;

        if (udata > 2){
        document.getElementById("centerbox1").style.backgroundColor = '#FF6C60';
        }
        else  
        if (udata <= 2)
        {
        document.getElementById("centerbox1").style.backgroundColor = '#99C262';
        } 


    });
});

我希望背景颜色为绿色，因为页面加载时字段中有 2 个数据，但页面显示为红色。

【问题讨论】：

标签： javascript html forms

【解决方案1】：

将函数移出模糊事件处理程序，并从ready() 处理程序中调用它：

$(document).ready(function() {
  // Function of its own
  function checkFields() {
    var text = "field(s) empty";
    var count = $('.user_field').not(function() {
      return this.value;
    }).length;

    $('#result').html(count + " " + text);

    //*alert(count);

    var udata = count;

    $('#centerbox1').css('background-color', udata > 2 ? '#FF6C60' : '#99C262');
  }

  // Set up event handler
  $('.user_field').blur(checkFields);

  // Call function
  checkFields();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr></tr>
  <td> Field 1: <input class="user_field" type="text" name="1[user_fname]" value="1" autofocus/></td>
  </tr>
  <tr>
    <td>Field 2: <input class="user_field" type="text" name="1[user_lname]" value="2" /></td>
  </tr>
  <tr>
    <td>Field 3: <input class="user_field phone" type="text" name="1[user_mobile]" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="result"></div>

<div class="containerbox">
  <div id="centerbox1" style="background-color: #FF6C60;">
    <div class="value">
      <p><span style="color: #fff ;font-weight:bold; font-size:36px">test</span></p>
    </div>
  </div>
</div>
</div>

【讨论】：