Question

我正在尝试使HTML按钮触发一个名为switch_user的函数，但每次我尝试点击它时，控制台都说switch_user不是函数。

这是按钮：

<input type="button" class="btn btn-login" onclick="switch_user()" id="switch_user" value="{%trans%}Switch{%endtrans%}">

在页面底部，我有一个脚本标记，其中包含此功能：

function switch_user(){
  $("#switch-success, #switch-error").addClass("hide");

  $.getJSON("/api/business/admin/swaproles?module="+$("#module").val()+"&user_from="+$("#user_from").val()+"&user_to="+$("#user_to").val(), function(data){
      if(data) {
          if(data["error"]){
              $("#switch-error").html( "{%trans%}There was an error{%endtrans%}: " + data["error"]);
              $("#switch-error").removeClass("hide");
          }
          else {
              $("#switch-success").html("{%trans%}User was switched successfully{%endtrans%}");
              $("#switch-success").removeClass("hide");
          }
          if(data["success"] == "ok") {
              $("#elements").html("");
          }

      } else {
          $("#switch-error").html("Critical failure - Please contact support");
          $("#switch-error").removeClass("hide");
      }
  });

}

当我尝试从控制台手动运行该功能时，它可以很好地找到它，但是onclick按钮拒绝识别它。我做错了什么？

Answer 1

问题是因为元素的id和函数名称是相同的。由于它们都存在于window范围内，因此存在冲突。要解决此问题，请更改函数的名称或元素的id。

更好的是，完全删除过时的on*事件属性，并使用不显眼的JS代码来附加事件处理程序。正如您已经使用jQuery，这是如何做到的：

<input type="button" class="btn btn-login" id="switch_user" value="{%trans%}Switch{%endtrans%}">

$(function() {
  $('#switch_user').on('click', function() {
    var $switchSuccess = $('#switch-success').addClass('hide');
    var $switchError = $('#switch-error').addClass('hide');

    $.getJSON("/api/business/admin/swaproles?module=" + $("#module").val() + "&user_from=" + $("#user_from").val() + "&user_to=" + $("#user_to").val(), function(data) {
      if (data) {
        if (data["error"]) {
          $switchError.html("{%trans%}There was an error{%endtrans%}: " + data["error"]).removeClass("hide");
        } else {
          $switchSuccess.html("{%trans%}User was switched successfully{%endtrans%}").removeClass("hide");
        }

        if (data["success"] == "ok") {
          $("#elements").html("");
        }
      } else {
        $switchError.html("Critical failure - Please contact support").removeClass("hide");
      }
    });

  })
});

Answer 2

更改ID。不要保持元素和函数名称的id相同。

JavaScript DOM绑定允许按HTML id进行索引。函数和属性在JavaScript中共享相同的命名空间。因此，当HTML中的id与您的某个函数或属性具有相同的名称时，您可能会遇到难以追踪的逻辑错误。虽然这更像是CSS最佳实践问题，但重要的是要记住何时无法解决您的JavaScript问题。

javascript函数不是函数，但它是

2 个答案: