javascript - onclick() 给出错误：ReferenceError: LoadAjax is not defined at HTMLInputElement.onclick

Question

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

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()
}

标签： javascripthtmleventsonclickreferenceerror

Answer 1

如果您在 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“脚本”标签。

我的.html：

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

我的.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()
    }
    myElement = document.getElementById("myID");
    myElement.onclick = function() { LoadAjax(); return false; }