未捕获的 ReferenceError：未定义 dropdownFunc。 Onclick功能不起作用[重复]答案

【问题标题】：Uncaught ReferenceError: dropdownFunc is not defined. Onclick function not working [duplicate]未捕获的 ReferenceError：未定义 dropdownFunc。 Onclick功能不起作用[重复]
【发布时间】：2020-11-25 15:06:46
【问题描述】：

这是第一次尝试做一些前端工作的 Django (python) 开发人员。

前端脚本

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
function dropdownFunc(val){
    console.log(val.includes("NoneOfThese_"))
if (val.includes("NoneOfThese_")) {
    $("#dropdown-list_" + val).show();
    }
else {
    $("#dropdown-list_" + val).hide();
    }
}
</script>

下拉列表 div：

        <div id = "dropdown-list_{{phone_array.count}}" class="jumbotron" style="display:none"> 
            <form method="POST" action="{% url 'insertPhoneDetails' %}">
                 <label for="brandName">Brand name:</label><br>
                 <input type="text" id="brandName" name="brandName"><br>

                 <label for="mobileName">Mobile name:</label><br>
                 <input type="text" id="mobileName" name="mobileName"><br>
</form>
</div>

第 32 行出错：<input type="radio" name="options" value="{{key}}" id="dropdown" onclick="dropdownFunc(value)" required> {{value}} <br><br>

错误：

Uncaught ReferenceError: dropdownFunc is not defined
    at HTMLInputElement.onclick ((index):32)

如何解决这个问题？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您不能有一个脚本标签同时具有src 和包含内联文本。而是将它们分成两个单独的脚本标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function dropdownFunc(val){
  // ...
</script>

但是您也没有正确地将值传递给dropdownFunc，您还应该考虑avoiding inline handlers，因为它们有可怕的范围规则和转义问题。改为使用 JavaScript 正确附加事件侦听器，例如：

$('#dropdown').on('click', e => dropdownFunc(e.target.value));

【讨论】：