Javascript 为什么这个简单的onclick函数不起作用

为什么这个简单的代码不起作用？有人能给我解释一下吗

我在

onclick

属性中调用了

cc（）

函数

HTML

cc

不是全局函数

它是用函数声明定义的，因此它的作用域是定义它的函数

该函数是传递给

ready

方法的匿名函数。（由于jQuery的配置，您可以在运行onload的函数中执行此操作）

---

全局变量（通常）是尽可能避免的，而内部事件属性通常依赖于它们

不要使用内部事件属性。使用JavaScript绑定JavaScript事件处理程序。因为您使用的是jQuery，所以请在方法上使用

$(document).ready(function(){

    function cc(){
        $('div').css('color','red');
    };

    $('button').on('click', cc);
});

单击
onclick
属性中的代码只能访问全局函数/变量。函数
cc
是其所定义函数的本地函数。您可以在该函数之外定义它（因此它是自动全局的），也可以将它分配到
window.cc
以显式地使其成为全局的（我建议使用第二个选项）。
您应该在
文档中附加处理程序。ready
类似于

html

<div> hey <div>
    <button  id="mybutton"> click me to change color</button>

CC是一个全球性的

我已经用一个有效的例子更新了你

Html


我通常不会这样做，但我希望对代码进行最小的更改。正如昆汀所说，当您选择div上的每个按钮时，cc不是一个全局函数

但是，在调用函数之前，还需要声明该函数。因此，在fiddle中，应该将函数包装在
头中

更新的演示：
是否重复？是不是更容易制作一个简单的$（'.button'）。单击函数？不寻找更简单的方法，寻找问题的根源：）是的，这是一个更简单的方法，就像他以前做的那样
$(document).ready(function(){

    function cc(){
        $('div').css('color','red');
    };

    $('button').on('click', cc);
});

<div> hey <div>
    <button  id="mybutton"> click me to change color</button>

$(document).ready(function(){
    //attach the function here
    $("#mybutton").click(
        function (){
           $('div').css('color','red');
        }
    );

});

<div> hey <div>
<button> click me to change color</button>

$('button').click(function()
{
    $('div').css('color','red');                       
});