javascript - 在另一个函数的 if 中调用匿名函数

Question

如果未填写基本表单的用户名，我将尝试“插入”警报器，并且我一直无助地试图理解为什么提交函数中的匿名函数没有被调用。

JIC 在我的 html 之上，我有一个准备好的警报 block :

<div id="alerter">
</div>

有问题的功能:

<script>
  function validateForm() {
    var x = document.forms["formz"]["username"].value;
    if (x == "") {
      (function() {
        alert("whoa");
        var div = document.createElement('div');
        div.setAttribute('class', 'alert alert-primary alert-dismissible fade show');
        div.setAttribute('role', 'alert');
        div.innerHTML = document.getElementById('alertonempty').innerHTML;
        document.getElementById('alerter').appendChild(div);
      })
      return false;
    }
  }
</script>

<script id="alertonempty" type="text/html">
  <strong>SMTH went wrong</strong> Seriously wrong
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</script>

是的，有一个调用 validateForm 的表单。它确实采用用户名变量并可以使用它(也通过警报检查它)但是匿名函数不会被调用。

请帮助我理解

Answer 1

您创建的是一个自动执行的匿名函数，为了使该函数正常工作，您需要在末尾添加第二对括号:

function validateForm() {
    var x = document.forms["formz"]["username"].value;
    if (x == "") {
      (function() {
        alert("whoa");
        var div = document.createElement('div');
        div.setAttribute('class', 'alert alert-primary alert-dismissible fade show');
        div.setAttribute('role', 'alert')
        div.innerHTML = document.getElementById('alertonempty').innerHTML;
        document.getElementById('alerter').appendChild(div);
      })();
//-----^^^^
      return false;
    }
  }