HTML按钮不调用函数答案

【问题标题】：HTML button not calling functionHTML按钮不调用函数
【发布时间】：2016-03-29 23:43:24
【问题描述】：

这是我的第一次 javascript 尝试，我在 chrome 控制台中得到以下信息：

“未捕获的 ReferenceError：未定义 test1。”

我正在尝试通过 onclick 按钮事件发送 Ajax 请求并在文档中显示数据。但是，由于该错误，我已经回到 hello-world 只是为了进行调试尝试。请原谅这种问题，因为我知道它非常初级。

感谢任何帮助。感谢您的宝贵时间！

<!DOCTYPE html>
<html>
<head>
</head> 
<body>

<button onclick="test1()">Click Here</button>
<p id="Data"></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

function test1(){
alert("Hello, World");
/* $.ajax({
    url: Target_URL,
    headers: {
        'Accept':'application/json',
        'authorization', 'Bearer ' + vToken
    },
    method: 'GET'
   // dataType: 'json',
   // data: YourData,
    success: ajaxCall = data
  }); */
}
</script>

</body>

</html>

【问题讨论】：

将 JS 移到按钮上方。
尝试删除src。该函数是一个命名函数，因此，它应该在编译时被提升。
检查这个，javascript代码是真的，但是你的html代码不好，检查这个dojo.telerik.com/ewiCE

标签： javascript html

【解决方案1】：

您只使用了一个 script 标记来加载 jquery 和您的方法 - 这将不起作用..."If a script element has a src attribute specified, it should not have a script embedded inside its tags." 这里是一个可行的解决方案：

<!DOCTYPE html>
<html>
<head>
</head> 
<body>

<button onclick="test1()">Click Here</button>
<p id="Data"></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
/* $.ajax({
    url: Target_URL,
    headers: {
        'Accept':'application/json',
        'authorization', 'Bearer ' + vToken
    },
    method: 'GET'
   // dataType: 'json',
   // data: YourData,
    success: ajaxCall = data
  }); */
}
</script>

</body>

</html>

【讨论】：

这是正确的解决方案。我懒惰的评论的延伸。
你真的应该把你的 js 放在头部，或者放在一个外部文件中：)
也许吧，但这不是这里的问题和主题......作为参考：stackoverflow.com/questions/196702/…

【解决方案2】：

您不能将您的 javascript 代码放在您链接外部文件的同一 <script> 标记中（它不应包含在 <script src="..."> 函数 </script> 中）。您的 test1 函数应与 scr javascript 标记分开。试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">/<script>
<script> your javascript function should be here </script>

希望这能解决您的问题。

【讨论】：

【解决方案3】：

将 JavaScript 放在文档的head 中，并分离出包含 jquery 的脚本和您的实际代码。

<!DOCTYPE html>
<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<script>
function test1(){
    alert("Hello, World");
}
</script>
</head> 
<body>
    <button onclick="test1()">Click Here</button>
    <p id="Data"></p>
</body>
</html>

【讨论】：

函数定义得很好。问题是尝试加载外部脚本并在同一个脚本标签内编写代码。
对正确答案投了反对票？是所有的 Redditty 吗？

【解决方案4】：

您没有将您的 javascript 方法放置在正确的 javascript 标签中，分别放置 javascript 方法和 javascript src，请查看以下内容以获得更多说明：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script type="text/javascript">
  function test1() {
    alert("Hello, World");
  }
/* $.ajax({
    url: Target_URL,
    headers: {
        'Accept':'application/json',
        'authorization', 'Bearer ' + vToken
    },
    method: 'GET'
   // dataType: 'json',
   // data: YourData,
    success: ajaxCall = data
  }); */
</script>

</head> 
<body>

<button onclick="test1()">Click Here</button>
<p id="Data"></p>

</body>

</html>

【讨论】：

【解决方案5】：

首先，您需要在调用 JavaScript 函数之前声明它。

改成这样：

<!DOCTYPE html>
<html>
<head>
</head> 
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
<script>
    function test1(){
        alert("Hello, World");
    }
</script>

<button onClick="test1()">Click Here</button>
<p id="Data"></p>

</body>

</html>

【讨论】：

函数定义得很好。问题是尝试加载外部脚本并在同一个脚本标签内编写代码。