javascript - 为什么我的函数没有触发 onclick？

Question

我试图通过单击按钮来调用 HTML 网站上的 JavaScript 函数(我已使用 Firebug 在网站上包含此代码)，当我在 Notepad++ 或任何其他编辑器上运行以下代码时，它可以工作，但是当我将此代码复制到网站并单击按钮，它给了我:

error:: change_value() is not defined

我的代码是这样的:

JavaScript:(我已将其复制到网页的标题部分)

<script type="text/javascript">
function change_value() {
    alert("Test");
} 
</script>

HTML:(我已将其复制到正文部分)

<button onclick="change_value()">Click Here !</button >

我尝试过仅在正文部分编写的所有代码都出现相同的错误。

Answer 1

在已显示页面的源代码中添加 JS 脚本(实际上使用 firebug 或任何调试器)不会执行任何操作，因为此标记 ( <script> ) 是由浏览器在加载页面时计算的.

相反，使用开发者工具(控制台)来定义您的函数；现在应该可以正常工作了。

编辑:

在 Chrome 中测试。在 Stack Overflow 页面顶部手动添加按钮后:

<button onclick="toast()">HELLO</button>

我测试了两件事:

添加 script直接标记到源代码中:

<script>function toast(){alert("Hello");}</script>

点击按钮不起作用。

现在，使用开发者控制台并定义相同的函数，单击按钮会正确显示警报。

编辑 2:为了准确地说明我使用开发者控制台的含义:通常在 Firebug 中，您应该看到一个“控制台”面板。如果您想“在运行时”定义一个 js 函数(当您的页面已加载时)，只需在控制台中输入其定义即可；在这种情况下:

function toast(){alert("Hello");}

它在所有浏览器上的工作原理完全相同。

正如 Ahmad Bamieh 在评论中建议的那样，您还可以添加 <script>来自外部 JS 脚本的标记，例如:

function addScript( src,callback) { 
    var s = document.createElement( 'script' );
    s.setAttribute( 'src', src );
    s.onload=callback; 
    document.body.appendChild( s );
}