javascript错误 - Chrome说这不是一个功能

Question

我有一个js文件和一个html。从html我点击功能调用。

我的问题是 - specification_none有效，但Chrome会提示以下错误：

  

未捕获的TypeError：specification_existing不是函数

那么问题是什么？为什么其他功能不起作用？

这是我的代码：

$( document ).ready(function() {

        if ($('#radio_specification_none').attr("checked")){

            $("#specification_existing_box").hide();    // hide existing_spec
            $("#specification_new_box").hide();         // hide new_spec

            $('#specification_existing_box')[0].selectedIndex = 0;          // set existing specifications to default value

            $('#specification_existing_box').prop('required', false);        // set existing spec. size the required attribute to false
            $('#specification_new_box').prop('required', false);        // set for new spec. the required attribute to false
        }
        if ($('#radio_specification_existing').attr("checked")){

            $("#specification_existing_box").show();            // hide existing_spec
            $("#specification_new_box").hide();                 // hide create new_spec

            $('#specification_existing_box').prop('required', true);        // set for new_spec the required attribute to true
            $('#specification_new_box').prop('required', false);            // set for new_spec the required attribute to false
        }
        if ($('#radio_specification_new').attr("checked")){

            $("#specification_new_box").show();                // show new_spec
            $("#specification_existing_box").hide();           // hide existing_spec

            $('#specification_existing_box')[0].selectedIndex = 0;          // set existing specifications to default value

            $('#specification_existing_box').prop('required', false);        // set for new_spec the required attribute to false
            $('#specification_new_box').prop('required', true);             // set for new_spec the required attribute to true
        }

    // ---- show and hide sizes ----- //

    // children sizes (default)
    $('#radio_child').change(function(){
        if (!$('#radio_child').checked){        // change if other user pick other button; this one is then false

            $("#child_sizes").show();           // show child sizes
            $("#konfektion_sizes").hide();      // hide adult sizes
        }

        $('#select_konfektion_sizes')[0].selectedIndex = 0;     // set adult size to "Wählen..."

        $('#select_child_sizes').prop('required',true);         // set for child size the required attribute to true
        $('#select_konfektion_sizes').prop('required',false);   // set for adult size the required attribute to false
    });
    // adult sizes
    $('#radio_adult').change(function(){        // change if other user pick other button; this one is then false
        if (!$('#radio_adult').checked){

            $("#child_sizes").hide();           // hide child sizes
            $("#konfektion_sizes").show();      // show adult sizes
        }

        $('#select_child_sizes')[0].selectedIndex = 0;          // set children size to default value

        $('#select_child_sizes').prop('required',false);        // set for child size the required attribute to false
        $('#select_konfektion_sizes').prop('required',true);    // set for adult size the required attribute to true
    });



    // triggers
    $('#radio_child').trigger('change');                        // trigger change (child radio) for one time, if document load

});

function specification_none(element){

		alert("specification_none");

    // change the checked attribute
    $(element).prop('checked', "checked");
    $('#specification_existing_box').prop('checked', "");
    $('#specification_new_box').prop('checked', "");

    //hide other specifications
    $("#specification_existing_box").hide();    // hide existing_spec
    $("#specification_new_box").hide();         // hide new_spec

    // set existing specifications to default value
    $('#specification_existing_box')[0].selectedIndex = 0;


    // set the required attribute from THIS input to true
    $('#specification_none_box').prop('required', true);
    // set the required attribute from the other inputs to false
    $('#specification_existing_box').prop('required', false);
    $('#specification_new_box').prop('required', false);
}

function specification_existing(element){

		alert("specification_existing");

    // change the checked attribute
    $(element).prop('checked', "checked");
    $('#specification_none_box').prop('checked', "");
    $('#specification_new_box').prop('checked', "");

    // show existing box
    $("#specification_existing_box").show();    // hide existing_spec

    //hide other specifications
    $("#specification_none_box").hide();    // hide existing_spec
    $("#specification_new_box").hide();         // hide new_spec

    // set the required attribute from THIS input to true
    $('#specification_existing_box').prop('required', true);
    // set the required attribute from the other inputs to false
    $('#specification_none_box').prop('required', false);
    $('#specification_new_box').prop('required', false);
}

function specification_new(element){

		alert("specification_new");

    // change the checked attribute
    $(element).prop('checked', "checked");
    $('#specification_existing_box').prop('checked', "");
    $('#specification_none_box').prop('checked', "");

    //hide other specifications
    $("#specification_existing_box").hide();    // hide existing_spec
    $("#specification_none_box").hide();         // hide new_spec

    // set existing specifications to default value
    $('#specification_existing_box')[0].selectedIndex = 0;


    // set the required attribute from THIS input to true
    $('#specification_new_box').prop('required', true);
    // set the required attribute from the other inputs to false
    $('#specification_existing_box').prop('required', false);
            $('#specification_none_box').prop('required', false);
}

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


<script type="text/javascript"  src="{{ url_for('static', filename='js/my.js') }}" ></script>

 <!--clothes specification-->
    <div class="raidio_box_specifications">
        <div>
            <table>
                <tr>
                <td><p>Besonderheit:  </p></td>
                <td  class="custom-control custom-radio custom-control-inline size_art_inner last_radio">
                    <input type="radio" id="radio_specification_new" name="specification" class="custom-control-input" onclick="specification_new(this)">
                    <label class="custom-control-label" for="radio_specification_new">neue erstellen</label>
                </td>
                <td class="custom-control custom-radio custom-control-inline size_art_inner">
                    <input type="radio" id="radio_specification_existing" name="specification" class="custom-control-input" onclick="specification_existing(this)" {% if clothing_info[0].clothes_specification_id != 1 %} checked="checked" {% else %}  {% endif %}>
                    <label class="custom-control-label" for="radio_specification_existing" >vorhandene</label>
                </td>
                <td class="custom-control custom-radio custom-control-inline size_art_inner">
                    <input type="radio" id="radio_specification_none" name="specification" class="custom-control-input" onclick="specification_none(this)" {% if clothing_info[0].clothes_specification_id == 1 %} checked="checked" {% else %}  {% endif %}>
                    <label class="custom-control-label" for="radio_specification_none">keine</label>
                </td>
                </tr>
            </table>
        </div>
    </div>

有人可以帮助我吗

Answer 1

我无法弄清楚为什么这不起作用。我制作了一个正在运行的版本，它运行得很好。

但是既然你使用了HTML元素的onclick道具，那么这里可能会出现问题。由于您使用的是jQuery，请考虑通过jQuery＆＃39; .click()方法绑定回调（见下文）。

这种方法可以大大减少范围等方面的错误，并且您不必污染全局JS空间。

你可能有一些脚本只是将函数specification_existing设置为其他类似的东西：

specification_existing = 'accidentally changed specification_existing'

这也表示您得到的错误：

• ... is not a function表示＆＃34;变量＆＃34; exsists，但不是可调用函数

• ... is not defined表示＆＃34;变量＆＃34;你试着打电话是未知的

以下是一些可以帮助您解决此类问题的事情：

• 保持全球空间清洁。以(function(){/* your code */})()或类似方式执行您的代码。

• 始终声明和初始化变量（var myLocalVar）或使用严格模式

• 尽量不要将JS代码混合到HTML中。使用jQuery或更好的vanilla JS API：jQuery.on('click', ()=>{[...]}) element.addEventListener('click', ()=>{[...]})

＆＃13;

＆＃13;

$(function(){
  function specification_none(element) {
    console.log('specification_none')

      // change the checked attribute
      $(element).prop('checked', "checked");
      $('#specification_existing_box').prop('checked', "");
      $('#specification_new_box').prop('checked', "");

      //hide other specifications
      $("#specification_existing_box").hide(); // hide existing_spec
      $("#specification_new_box").hide(); // hide new_spec

      // set existing specifications to default value
      //$('#specification_existing_box')[0].selectedIndex = 0;


      // set the required attribute from THIS input to true
      $('#specification_none_box').prop('required', true);
      // set the required attribute from the other inputs to false
      $('#specification_existing_box').prop('required', false);
      $('#specification_new_box').prop('required', false);
  }

  function specification_existing(element) {
    console.log('specification_existing')
      // change the checked attribute
      $(element).prop('checked', "checked");
      $('#specification_none_box').prop('checked', "");
      $('#specification_new_box').prop('checked', "");

      // show existing box
      $("#specification_existing_box").show(); // hide existing_spec

      //hide other specifications
      $("#specification_none_box").hide(); // hide existing_spec
      $("#specification_new_box").hide(); // hide new_spec

      // set the required attribute from THIS input to true
      $('#specification_existing_box').prop('required', true);
      // set the required attribute from the other inputs to false
      $('#specification_none_box').prop('required', false);
      $('#specification_new_box').prop('required', false);
  }

  function specification_new(element) {
    console.log('specification_new')

      // change the checked attribute
      $(element).prop('checked', "checked");
      $('#specification_existing_box').prop('checked', "");
      $('#specification_none_box').prop('checked', "");

      //hide other specifications
      $("#specification_existing_box").hide(); // hide existing_spec
      $("#specification_none_box").hide(); // hide new_spec

      // set existing specifications to default value
      //$('#specification_existing_box')[0].selectedIndex = 0;


      // set the required attribute from THIS input to true
      $('#specification_new_box').prop('required', true);
      // set the required attribute from the other inputs to false
      $('#specification_existing_box').prop('required', false);
      $('#specification_none_box').prop('required', false);
  }

  $('#radio_specification_new').click(specification_new)
  $('#radio_specification_existing').click(specification_existing)
  $('#radio_specification_none').click(specification_none)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="raidio_box_specifications">
    <div>
        <table>
            <tr>
              <td>
                  <p>Besonderheit: </p>
              </td>
              <td class="custom-control custom-radio custom-control-inline size_art_inner last_radio">
                  <input type="radio" id="radio_specification_new" name="specification" class="custom-control-input">
                  <label class="custom-control-label" for="radio_specification_new">neue erstellen</label>
              </td>
              <td class="custom-control custom-radio custom-control-inline size_art_inner">
                  <input type="radio" id="radio_specification_existing" name="specification" class="custom-control-input" {% if clothing_info[0].clothes_specification_id !=1 %} checked="checked" {% else %} {% endif %}>
                  <label class="custom-control-label" for="radio_specification_existing">vorhandene</label>
              </td>
              <td class="custom-control custom-radio custom-control-inline size_art_inner">
                  <input type="radio" id="radio_specification_none" name="specification" class="custom-control-input" {% if clothing_info[0].clothes_specification_id==1 %} checked="checked" {% else %} {% endif %}>
                  <label class="custom-control-label" for="radio_specification_none">keine</label>
              </td>
            </tr>
        </table>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;