Uncaught ReferenceError: dropdownFunc is not defined. Onclick function not working

Question

This is a Django (python) developer trying to do some frontend stuff for the first time.

Frontend script

<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>

dropdown-list 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>

Error on line 32: <input type="radio" name="options" value="{{key}}" id="dropdown" onclick="dropdownFunc(value)" required> {{value}} <br><br>

Error:

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

How to tackle this?

score 1 · Answer 1 · answered Nov 25 '20 at 15:09

You can't have a single script tag that both has a src and contains inline text. Separate them out into two separate script tags instead:

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

But you also aren't passing the value to dropdownFunc correctly, and you should also consider avoiding inline handlers, since they have horrible scoping rules and escaping issues. Attach the event listener properly using JavaScript instead, eg:

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

Uncaught ReferenceError: dropdownFunc is not defined. Onclick function not working

1 Answers1