onclick给出错误：ReferenceError：HTMLInputElement.onclick中未定义LoadAjax

问题描述

这是我的代码，根本不起作用。

HTML代码：

<input type="button" value="Click Here" onclick="LoadAjax()"/>

JS代码：

function LoadAjax(){ 

  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest()
  } else {
    request = new ActiveXObject('Microsoft.XMLHTTP')
  }

  //request.open('GET','data.json')
   request.open('GET','http://localhost:20301/api/values')
  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      var items = JSON.parse(request.responseText)
      console.log(items);
      var output = '<ul>'
      
      for (var key in items) {
        console.log(items[key])
        output += '<li>' + items[key].Name + ' | ' + items[key].Family + '</li>'
      }

      output += '</ul>'
      document.getElementById('update').innerHTML = output
    }
  }
  request.send()
}

解决方法

如果两个都包含在HTML文件中，请以这种方式进行。通过在加载后绑定“ onClick”，可以防止在加载前调用该函数：

<input type="button" value="Click Here" id="myID">
<script>

     function LoadAjax(){ 
    
      if (window.XMLHttpRequest) {
        request = new XMLHttpRequest()
      } else {
        request = new ActiveXObject('Microsoft.XMLHTTP')
      }
    
      //request.open('GET','data.json')
       request.open('GET','http://localhost:20301/api/values')
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          var items = JSON.parse(request.responseText)
          console.log(items);
          
    
          var output = '<ul>'
    
          for (var key in items) {
            console.log(items[key])
            output += '<li>' + items[key].Name + ' | ' + items[key].Family + '</li>'
          }
    
          output += '</ul>'
          document.getElementById('update').innerHTML = output
        }
      }
      request.send()
    }
    myElement = document.getElementById("myID");
    myElement.onclick = function() { LoadAjax(); return false; }

</script>

如果您将其保存在单独的文件中，请使用此标签（注意！在js文件中，请勿使用HTML“ script”标签。

my.html：

[...]
<input type="button" value="Click Here" id="myID">
[...]
<script src="my.js"></script>
[...]

my.js：

     function LoadAjax(){ 
    
      if (window.XMLHttpRequest) {
        request = new XMLHttpRequest()
      } else {
        request = new ActiveXObject('Microsoft.XMLHTTP')
      }
    
      //request.open('GET','http://localhost:20301/api/values')
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          var items = JSON.parse(request.responseText)
          console.log(items);
          
    
          var output = '<ul>'
    
          for (var key in items) {
            console.log(items[key])
            output += '<li>' + items[key].Name + ' | ' + items[key].Family + '</li>'
          }
    
          output += '</ul>'
          document.getElementById('update').innerHTML = output
        }
      }
      request.send()
    }
    myElement = document.getElementById("myID");
    myElement.onclick = function() { LoadAjax(); return false; }