I have a javascript file as you'll see in picture below .
In this file i create a html code for my webpage , And In this html i call a function defined in the javascript file . But when i run it i get that the function isn't defined .
additional info :

plus the function mentioned ("cButton") is defined in another function inside the javascript file.

(function () {
    var thecid = 0;

    function cButton (ii) {
        document.getElementById(ii).style.display = 'none';
        alert('fdgfg');
    }

    $("#subber").on("click", function () {
        var thelm = "#c0"+thecid;
        var newmhtml = '<div id="c0' + thecid + '" class="cnew clearfix">';
        var ii='c0'+thecid;
        newmhtml += '<section class="c-content">';
        newmhtml += '<a href="#" onclick="cButton(\'' + ii + '\');" style="color:black;">x</a>';
        newmhtml += '<p>' + nl2br(textval) + '</p> </section></div>';        
    });
})()

I have a javascript file as you'll see in picture below .
In this file i create a html code for my webpage , And In this html i call a function defined in the javascript file . But when i run it i get that the function isn't defined .
additional info :

plus the function mentioned ("cButton") is defined in another function inside the javascript file.

(function () {
    var thecid = 0;

    function cButton (ii) {
        document.getElementById(ii).style.display = 'none';
        alert('fdgfg');
    }

    $("#subber").on("click", function () {
        var thelm = "#c0"+thecid;
        var newmhtml = '<div id="c0' + thecid + '" class="cnew clearfix">';
        var ii='c0'+thecid;
        newmhtml += '<section class="c-content">';
        newmhtml += '<a href="#" onclick="cButton(\'' + ii + '\');" style="color:black;">x</a>';
        newmhtml += '<p>' + nl2br(textval) + '</p> </section></div>';        
    });
})()

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 8, 2021 at 2:01 Star 13133 silver badges1818 bronze badges asked Mar 6, 2014 at 9:34 saeed hardansaeed hardan 48522 gold badges1111 silver badges2424 bronze badges 3

• Why a picture of the code instead of the code itself?? – techfoobar Commented Mar 6, 2014 at 9:36
• Please put code instead of picture – Vicky Gonsalves Commented Mar 6, 2014 at 9:37
• sorry i thought its more fortable – saeed hardan Commented Mar 6, 2014 at 9:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

For the onclick to work, you need your cButton() to be accessible globally as a property of the global window object.

Change you code to:

window.cButton = function(ii) {
   ...
}

The problem is that you are defining cButton inside the document ready handler, so it doesn't exist outside that. If you declare the function outside then things can access it later...

function cButton(ii){
    document.getElementById(ii).style.display = 'none';
    alert('fdgfg');
}

(function(){
    var thecid = 0;
    $("#subber").on("click", function(){
        var thelm = "#c0"+thecid;
        var newmhtml = '<div id="c0'+thecid+'" class="cnew clearfix">';
        var ii='c0'+thecid;
        newmhtml += '<section class="c-content">';
        newmhtml += '<a href="#" onclick="cButton(\''+ii+'\');" style="color:black;">x</a>';
        newmhtml += '<p>'+nl2br(textval)+'</p> </section></div>';        
    });
})()