JavaScript onchange function is undefined?

Question

I have no idea why this function keeps saying it is undefined. I'm trying to call it onchange on a tag and i'm trying to check if the value being called into the function is the value of the selected option. This is an extremely simple html page so I have no idea why this error would pop up? Can anybody tell me what's wrong with this code?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Dog Decider</title>
        <script src="data.js">
        function buildSelect(dom){
            console.log(dom);
        }
        </script>
    </head>
    <body>
        <h1>Welcome to Dog Decider!</h1>
        <p>Are you looking for a small or large dog?</p>
        <select name="first" onchange="buildSelect(this);">
            <option value="none">-- Select Dog Size --</option>
            <option value="Small">Small</option>
            <option value="Large">Large</option>
       </select>
    </body>
</html>

Originally the function was bigger and actually implemented data.js, but I tore it all down to try and discover the root of this problem...

@Carcigenicate Uncaught ReferenceError: buildSelect is not defined at HTMLSelectElement.onchange (DogDecider.html:15) is what the console prints out — Abbey S, Feb 11 '18 at 20:45
In short: remove `src="data.js"` when you are providing code in the `script` tag. — trincot, Feb 11 '18 at 20:46

Stefan Octavian · Answer 1 · 2018-02-11T20:52:04.803

1

Just remove the src="data.js" from your script tag and it should work. HTML will only evaluate the contents of script tags with the attribute type set to text/javascript or none and no src attribute.

Edit: To load data.js in your page add another empty script with src="data.js" before the script in your page.

 <script src="data.js"></script>
 <script type="text/javascript">
     function buildSelect() {
        // ...
     }
 </script>

edited Feb 11 '18 at 20:52

answered Feb 11 '18 at 20:46

Stefan Octavian

593
6
17

@Ele Otherwise, the content will not be evaluated so the function will not be defined. Of course, it's a good idea. See my edit on my answer for what to do if you also want to import the other script. – Stefan Octavian Feb 11 '18 at 20:54

JavaScript onchange function is undefined?

1 Answers1