Uncaught TypeError: $(...).makeRed is not a function

Question

I want to call custom javascript function with jquery selector but this say Uncaught TypeError: $(...).makeRed is not a function

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h3 id="ch">Hello Wrld</h3>

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

<script>
    $(document).ready(function(){
        $.fn.makeRed = function(){
            this.html('welcome to all');
            return this;
    }
});
    $('#ch').makeRed();


</script>

Put the line `$('#ch').makeRed();` inside `$(document).ready(function(){...})` too. — Teemu, Apr 24 '20 at 07:11

score 0 · Accepted Answer · answered Apr 24 '20 at 07:15

You're calling makeRed before it's created on ready State. Put it inside the }); Here is the fixed snippet. :)

    $(document).ready(function(){
        $.fn.makeRed = function(){
            this.html('welcome to all');
            return this;
    }
     $('#ch').makeRed();
});

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h3 id="ch">Hello Wrld</h3>

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

Uncaught TypeError: $(...).makeRed is not a function

1 Answers1