"Javascript Error "Uncaught ReferenceError: selectMove is not defined"

Question

I keep getting this error in the below code on the last script line in my handlebars file "Javascript Error "Uncaught ReferenceError: selectMove is not defined"

Here is my update-pokemon.handlebars rendered from the console.

       <html>
<head>
    <title>Pokemon Database</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
    <script src="/static/selectMove.js"></script>
    <script src="/static/updatepokemon.js"></script>
</head>
<body>

<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
    Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
    Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
    Primary Move: <select name="movename" id="move-selector">
        <option value="1">Vine Whip</option>
        <option value="2">Razor Leaf</option>
        <option value="3">Solar Beam</option>
        <option value="4">Ember</option>
        <option value="5">Flame Burst</option>
        <option value="6">Flamethrower</option>
        <option value="7">Bubble</option>
        <option value="8">Water Gun</option>
        <option value="9">Hydro Pump</option>
        <option value="10">String Shot</option>
        </select><br>
        </form>
    <button onclick="updatePokemon(13)">Update</button>
    <script>selectMove(1);</script> 
</body>

I think it may relate to the selectMove.js file that contains the selectMove function, which is below here

function selectMove(id) {
        $("#move-selector").val(pokemonid);
}

Also here is my updatepokemon file

function updatePokemon(id) {
        $.ajax({
                url: '/pokemon/' + id,
                type: 'PUT',
                data: $('#update-pokemon').serialize(),
                success: function(result) {
                  window.location.replace("./");
                }
        })
};

The first file is my handlebars file in my views directory, and the second is my selectMove.js located in the public directory.

EDIT - Here is my handlebars code

<h1> Update {{pokemon.pokemonname}}: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
        Pokemon Name: <input type="text" name="pokemonname" value="{{pokemon.pokemonname}}"><br>
        Evolution Level: <input type="text" name="evolutionlevel" value="{{pokemon.evolutionlevel}}"><br>
        Primary Move: <select name="movename" id="move-selector">
                {{#each move}}
                <option value="{{primarymoveid}}">{{primarymovename}}</option>
                {{/each}}
        </select><br>
                </form>
        <button onclick="updatePokemon({{pokemon.pokemonid}})">Update</button>
        <script>$(function() {selectMove({{pokemon.movename}})});</script>

Is `selectMove.js` even loading? (I'm saying _it is not_). Check your browser's developer console, specifically the "network" tab. Does that file load properly? — random_user_name, Nov 21 '17 at 02:35
The scope of the `selectMove` function is probably limited. You could use something like this `window.selectMove = function(){.....}` — Titus, Nov 21 '17 at 02:36
It doesn't load properly, what I don't understand is why the updatePokemon function calls yet the selectMove doesn't since they're in the same directory. — Timk10, Nov 21 '17 at 02:38

score 0 · Answer 1 · answered Nov 21 '17 at 02:38

0

I think what's happening is your selectMove function from external JavaScript isn't loaded yet. Wrap the selectMove in $( document ).ready()

<script>$(function() { selectMove(1); });</script>

answered Nov 21 '17 at 02:38

Matthew Thurston

720
5
22

I added the following " " However it's still not showing when I load the network tab and is giving me this error "Uncaught ReferenceError: selectMove is not defined at HTMLDocument. (6:30) at j (jquery.min.js:2) at k (jquery.min.js:2)" – Timk10 Nov 21 '17 at 02:44
@Timk10 note if you want to have an option select by default you can add the selected attribute to an option. https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element - also, if you're trying to run selectMove when the select changes you may need to bind it to the select change event. https://api.jquery.com/change/ – Matthew Thurston Nov 21 '17 at 02:49
Maybe I do need to be a change to it every time, however using handlebars I iterate through the items. Even still should the selectMove be showing in the network tab in my developer tools? – Timk10 Nov 21 '17 at 02:56
As @cale_b pointed out yes, you should see it under Network for either the "All" or "JS" tab. – Matthew Thurston Nov 21 '17 at 03:00

score 0 · Answer 2 · answered Nov 21 '17 at 02:55

Try with it :

 <html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
    <option value="1">Vine Whip</option>
    <option value="2">Razor Leaf</option>
    <option value="3">Solar Beam</option>
    <option value="4">Ember</option>
    <option value="5">Flame Burst</option>
    <option value="6">Flamethrower</option>
    <option value="7">Bubble</option>
    <option value="8">Water Gun</option>
    <option value="9">Hydro Pump</option>
    <option value="10">String Shot</option>
    </select><br>
    </form>
   <button onclick="updatePokemon(13)">Update</button>
   <script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
   <script src="/static/selectMove.js"></script>
   <script src="/static/updatepokemon.js"></script>
   <script>selectMove(1);</script> 
   </body>
   </html>

To better practice again, add document ready.

Thank you, this seemed to help as it's now displaying in the network tab. However I am still getting the "13:27 Uncaught ReferenceError: selectMove is not defined at 13:27" :( — Timk10, Nov 21 '17 at 03:06
I added document ready as said as well, unfortunately I think my variables may be off in my handlebars as it's not properly updating the movename.. Thanks for your help! — Timk10, Nov 21 '17 at 03:11
Maybe add in reason for what's wrong instead of just posting the whole code? — Tree Nguyen, Nov 21 '17 at 03:35
For example, this is my codes to call function/object/whatever inside another js file : — user8455694, Nov 21 '17 at 03:41

"Javascript Error "Uncaught ReferenceError: selectMove is not defined"

2 Answers2