Uncaught ReferenceError: myFunction не определена в HTMLButtonElement.onclick в JQuery и HTML

Sep 08 2020

Я применяю 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>

По умолчанию

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

скрыт пока

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

видно.

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

- отобразить myMSF и скрыть. Также он создает тело таблицы

Когда кнопка «Продолжить» нажата, я получил эту ошибку:

Uncaught ReferenceError: myFunction не определена в HTMLButtonElement.onclick

и этот код выделен

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

Как мне решить эту проблему?

Спасибо

Ответы

1 gaetanoM Sep 08 2020 at 01:05

Вы определили функцию myFunction () { внутри контекста $ (document) .ready (function () { . Следовательно, она не видна снаружи. Переместите такую функцию за пределы dom.

Более того, избегайте встроенного обработчика событий, используйте вместо него .on () :