Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick in JQuery and HTML

Question

I am applying JQuery:

HTML

    <div id="myNotice" class="container-fluid">

            <div style="margin-bottom: 10px;" class="row">
                <div class="col-lg-12" >
                    <button type="button" onclick="myFunction()" class="btn btn-block btn-info">
                        <i class="fas fa-arrow-right"></i> 
                            <span >Proceed</span>
                    </button>
                </div>
            </div>   
    </div>


  <div id="myMSF" class="container-fluid" style="display:none">
                 <table id="msfTable" class=" table table-bordered table-striped table-hover datatable">
                        <thead>
                            <tr>
                                <th scope="col" width="4%">ID</th>
                                <th scope="col" width="25%">Core Value<span style="color:red;">*</span></th>                                    
                                <th scope="col" width="25%">Rating<span style="color:red;">*</span></th>                                    
                                <th scope="col" width="46%">Comment</th>
                            </tr>
                        </thead> 
                        <tbody class="resultbody">

                        </tbody>
                    </table>  
  </div>

JQuery

<script type="text/javascript">
  $(document).ready(function() {  
         //Try to get tbody first with jquery children. works faster!
     var tbody = $('#msfTable').children('tbody');
     
     //Then if no tbody just select your table 
     var table = tbody.length ? tbody : $('#msfTable');
     $('[name=count_skills_no]').text();

  function myFunction() {
    var x = document.getElementById("myMSF");
    var y = document.getElementById("myNotice");
    if (x.style.display === "none") {
      x.style.display = "block";
      y.style.display = "none";
    } else {
      x.style.display = "none";
      y.style.display = "block";
    }
     var nx = ($('.resultbody tr').length - 0) + 1;
     var num_rows = $("#msfTable tbody tr").length + 1; 
    var rows = $('[name=count_skills_no]').val() - 1;
    var sn;
    for (var i = 0; i < rows; i++) {
        sn = num_rows + i;
     //Add row
     table.append('<tr>\n' +
                        '<td class="no">' + sn + '</td>\n' +
                        '        <td><select class="form-control select2bs4" data-placeholder="Choose Employee Type" tabindex="1" name="appraisal_skill_id[]" required>\n' +
                        '             <option value="0" selected="true" disabled="true">Select Core Value</option>\n' +
                        '              @if($skills->count() > 0 )\n' +
                        '                 @foreach($skills as $skill)\n' +
                        '                 <option value="{{$skill->id}}">{{$skill->skill_name}}</option>\n' +
                        '                 @endforeach\n' +
                        '             @endif\n' +
                        '         </select></td>\n' +
                        '        <td><select class="form-control select2bs4" data-placeholder="Choose Rating" tabindex="1" name="appraisal_respondent_rating_id[]" required>\n' +
                        '             <option value="0" selected="true" disabled="true">Select Rating</option>\n' +
                        '              @if($ratings->count() > 0 )\n' +
                        '                 @foreach($ratings as $rating)\n' +
                        '                 <option value="{{$rating->id}}">{{$rating->rating_value}} - {{$rating->rating_name}}</option>\n' +
                        '                 @endforeach\n' +
                        '             @endif\n' +
                        '         </select></td>\n' +
                        '   <td><input type="text" name="comment[]" placeholder="Enter comment here" class="form-control comment" required></td>\n' +
    '</tr>');
     }
  }
  });
 </script>

By default

<div id="myMSF" class="container-fluid" style="display:none"> 

is hidden while

<div id="myNotice" class="container-fluid"> 

is visible.

                    <button type="button" onclick="myFunction()" class="btn btn-block btn-info">
                        <i class="fas fa-arrow-right"></i> 
                            <span >Proceed</span>
                    </button>

is to display myMSF and hide. Also it creates tbody of the table

When the button proceed is onclick, I got this error:

Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick

and this code is highlighted

 <button type="button" onclick="myFunction()" class="btn btn-block btn-info">

How do I resolve it?

Thanks

Answer 1

You defined function myFunction() { inside the context of $(document).ready(function() {. Hence, it is not visible outside. Move such a function outside the dom ready.

Moreover, avoid inline event handler, use instead .on():

$('#myNotice button.btn-info').on('click', function(e) {
    .....
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div id="myNotice" class="container-fluid">

    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12" >
            <button type="button" onclick="myFunction()" class="btn btn-block btn-info">
                <i class="fas fa-arrow-right"></i>
                <span >Proceed</span>
            </button>
        </div>
    </div>
</div>


<div id="myMSF" class="container-fluid" style="display:none">
    <table id="msfTable" class=" table table-bordered table-striped table-hover datatable">
        <thead>
        <tr>
            <th scope="col" width="4%">ID</th>
            <th scope="col" width="25%">Core Value<span style="color:red;">*</span></th>
            <th scope="col" width="25%">Rating<span style="color:red;">*</span></th>
            <th scope="col" width="46%">Comment</th>
        </tr>
        </thead>
        <tbody class="resultbody">

        </tbody>
    </table>
</div>

<script>
function myFunction() {
    var x = document.getElementById("myMSF");
    var y = document.getElementById("myNotice");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "block";
    }
    var nx = ($('.resultbody tr').length - 0) + 1;
    var num_rows = $("#msfTable tbody tr").length + 1;
    var rows = $('[name=count_skills_no]').val() - 1;
    var sn;
    for (var i = 0; i < rows; i++) {
        sn = num_rows + i;
        //Add row
        table.append('<tr>\n' +
                '<td class="no">' + sn + '</td>\n' +
                '        <td><select class="form-control select2bs4" data-placeholder="Choose Employee Type" tabindex="1" name="appraisal_skill_id[]" required>\n' +
                '             <option value="0" selected="true" disabled="true">Select Core Value</option>\n' +
                '              @if($skills->count() > 0 )\n' +
                '                 @foreach($skills as $skill)\n' +
                '                 <option value="{{$skill->id}}">{{$skill->skill_name}}</option>\n' +
                '                 @endforeach\n' +
                '             @endif\n' +
                '         </select></td>\n' +
                '        <td><select class="form-control select2bs4" data-placeholder="Choose Rating" tabindex="1" name="appraisal_respondent_rating_id[]" required>\n' +
                '             <option value="0" selected="true" disabled="true">Select Rating</option>\n' +
                '              @if($ratings->count() > 0 )\n' +
                '                 @foreach($ratings as $rating)\n' +
                '                 <option value="{{$rating->id}}">{{$rating->rating_value}} - {{$rating->rating_name}}</option>\n' +
                '                 @endforeach\n' +
                '             @endif\n' +
                '         </select></td>\n' +
                '   <td><input type="text" name="comment[]" placeholder="Enter comment here" class="form-control comment" required></td>\n' +
                '</tr>');
    }
}
$(document).ready(function() {
    //Try to get tbody first with jquery children. works faster!
    var tbody = $('#msfTable').children('tbody');

    //Then if no tbody just select your table
    var table = tbody.length ? tbody : $('#msfTable');
    $('[name=count_skills_no]').text();
});
</script>