Yakalanmamış ReferenceError: myFunction, JQuery ve HTML'de HTMLButtonElement.onclick'te tanımlanmadı

Question

JQuery uyguluyorum:

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>

Varsayılan olarak

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

gizli iken

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

görülebilir.

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

myMSF'yi görüntülemek ve gizlemek. Ayrıca masanın gövdesini oluşturur

Devam düğmesi onclick olduğunda, şu hatayı aldım:

Yakalanmamış ReferenceError: myFunction HTMLButtonElement.onclick adresinde tanımlanmamış

ve bu kod vurgulanmıştır

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

Bunu nasıl çözerim?

Teşekkürler

Answer 1

$ (Document) .ready (function () { bağlamında myFunction () {işlevini tanımladınız . Dolayısıyla, dışarıdan görünmez. Böyle bir işlevi dom'un dışına taşıyın hazır.

Dahası, satır içi olay işleyiciden kaçının, bunun yerine .on () kullanın :

$('#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/[email protected]/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>