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

【问题标题】：onclick() gives error: ReferenceError: LoadAjax is not defined at HTMLInputElement.onclickonclick() 给出错误：ReferenceError: LoadAjax is not defined at HTMLInputElement.onclick
【发布时间】：2020-09-05 09:36:08
【问题描述】：

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

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

【问题讨论】：

How do I format my posts using Markdown or HTML?
函数在被标记引用之前必须可用。将<script> 标签移动到站点的<head> 中。

标签： javascript html events onclick referenceerror

【解决方案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; }

【讨论】：