How to fix “Uncaught ReferenceError: nameCheck is not defined” error?

Question

I am having difficulty getting this to work, everything works except the dependent dropdown, am I doing something wrong?

I am trying to add this to a google sheet script working with a sheet, it all seems to work except the dependent dropdown.

This is the error I'm getting:

Uncaught ReferenceError: nameCheck is not defined

if I test this code on an HTML tester it seems to work correctly, however, it does not seem to work in google sheets.

<html lang="en">
<body>
<h4>Add a Customer</h4>
 Select a Date: <input type="date" id="date" name="start" class="mb-3">
<div>
     Sales Rep:&nbsp;&nbsp;
    <select id="rep">
        <option>select option</option>
        <option>Neil</option>
        <option>Dave</option>
        <option>Bob</option>
        <option>Trick</option>
    </select>
</div>
 &nbsp;&nbsp;
<div class="add-customer-form">
    <div class="form-group">
        <label for="first-name">Company name : </label>
        <input type="text" class="form-control" id="first-name">
    </div>
    <div>
         Product type:&nbsp;&nbsp;
        <select id="input" onchange="nameCheck()">
            <option>select option</option>
            <option>CASH</option>
            <option>Training</option>
            <option>Optional Modules</option>
            <option>Annual Additional Modules</option>
            <option>Hosting Existing user moving Licence</option>
            <option>Rentals</option>
            <option>Existing Customer - Rentals</option>
            <option>Existing Customer - CASH</option>
            <option>other</option>
            google.script.run.nameCheck();
            console.log(input);
        </select>
        <div>
             Product:&nbsp;&nbsp;
            <select id="output" onchange="nameCheck()">
            </select>
                 

        </div>
    </div>
     &nbsp;&nbsp;
</div>
<div class="form-group">
    <label for="first-name">Quantity : </label>
    <input type="number" class="form-control" id="last-name">
</div>
<div class="form-group mt-3">
    <label for="phone-number">Previous CAD : </label>
    <input type="text" class="form-control" id="phone-number">
    <div class="form-group">
        <label for="sales-price">Sales Price : </label>
        <input type="number" class="form-control" id="salesP">
    </div>
    <div class="form-group">
        <label for="deposit">Deposit : </label>
        <input type="number" class="form-control" id="deposit">
    </div>
    <div class="form-group">
        <label for="install">No. Intallments : </label>
        <input type="number" class="form-control" id="install">
    </div>
    <div class="form-group">
        <label for="invoice">Invoice Nr : </label>
        <input type="text" class="form-control" id="invoice">
    </div>
    <div class="form-group">
        <label for="Notes">Notes : </label>
        <input type="text" class="form-control" id="notes">
    </div>
     &nbsp;&nbsp; <button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
     Successfully Added!!
</div>
<script>     

function nameCheck(){
     var a=document.getElementById("input").value;
                console.log(a);
                if(a==="CASH")
                {
                    var arr=["Cash 1","cash2"];
                }
                else if(a==="Existing Customer - CASH")
                {
                    var arr=["existing 1", "existing 2"];
                }
                    else if(a==="Training")
                {
                    var arr=["Level 1 Training (in-house)","Level 2 Training (in-house)","Level 3 Training (in-house)","Onsite Training (up to 4 people)","Training Online per hour","Principles of Design (Renee Mascari)","Graham Hayden Sales/Care","KBBConnect training (per hours)","Training Solus (in-house) - 8 people"];
                }
                var string="";
                for(i=0;i<arr.length;i++)
                {
                    string=string+"<option value="+arr[i]+">"+arr[i]+"</option>";
                }
                document.getElementById("output").innerHTML=string;
            }
                        
        </script>
</body>
</html>

Screenshot off dialog:

Answer 1

The code in the question have several issues, ie:

Bad HTML

Remove google.script.run.nameCheck(); and console.log(input); from

<select id="input" onchange="nameCheck()">
    <option>select option</option>
    <option>CASH</option>
    <option>Training</option>
    <option>Optional Modules</option>
    <option>Annual Additional Modules</option>
    <option>Hosting Existing user moving Licence</option>
    <option>Rentals</option>
    <option>Existing Customer - Rentals</option>
    <option>Existing Customer - CASH</option>
    <option>other</option>
    google.script.run.nameCheck();
    console.log(input);
 </select>

The above because JavaScript can't be included that way between HTML tags.

Use of HTML attributes for handling events.

Instead of

<select id="input" onchange="nameCheck()">

Use

<select id="input">

then between <script></script> use something like

document.getElementById('input').onchange = nameCheck;

or use addEventListener

Related

HTML form submits twice if the onsubmit function runs longer than 10 seconds

How to fix “Uncaught ReferenceError: nameCheck is not defined” error?

Question

1 answers

solution1
1 2020-08-13 19:04:16

How to fix “Uncaught ReferenceError: nameCheck is not defined” error?

Question

1 answers

solution1 1 2020-08-13 19:04:16

solution1
1 2020-08-13 19:04:16