html javascript - onclick() reference error: function not defined

Question 1

Given my html file, the console gives an error code:

Reference Error: loadData not defined.

Based from other answers I've rechecked mine where,

My function is declared just before the </body>,
I included the javascript library at the <head></head> ;
and even changed my <input type= submit to <input type= button
and if it helped, I tried deleting my form tags where it is enclosed (but this is for another question regarding query strings).

Here's how it would look like now:

<head>
 <script src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
 {%for document in documents %}
 <li> {{document.filename}}
 <input type="button" id="{{ document.id }}" onclick="loadData(this.id)" name = "load-data" value="Add to Layer"/>
 </li>
 {%endfor%}
<script type ="text/javascript">
function loadData(documentId){
 $.ajax({
 url:"/load",
 data: {'documentId': documentId},
 type: 'GET',
 success: function(){
 window.location.href = "http://127.0.0.1:8000/url/locations";
 }
});
}
</script>
</body>

I can't seem to find an explanation why the function won't fire.

Question 2

Your <script> tag doesn't close your javascript function.

Question 3

@Zange-chan oh sorry I might have forgot to type it in. but it's there so it's not that

Question 4

I don't see any problem except a missing " in the button's name attribute. Your point 1 shouldn't matter because regardless of where the script is it will have been run by the time the user actually clicks on the buttons. Points 2-4 shouldn't matter at all as far as whether the function can be called from the onclick.

Question 5

@nnnnnn that's another typo I got there sorry. I'm using vm and can't copy and paste the code just because I can't fix my proxy to use the browser directly from there. anyhow, I the placement actually mattered. I went to put it up at the head and then it worked.

Question 6

@nnnnnn but if you could explain to me further why it should've worked I would be glad to hear the explanation please.

Question 7

Here's the fix (as my friend explained):

I had to put my script up in the <head> tags.

Why? Because the document is already loaded before the script gets to be.

If I want to retain it at the bottom it had to look something like this:

$(document).ready(
 $('input').onclick(function(){})

After putting it up the code works.

Question 8

That explanation doesn't really make sense for code called by a click event (unless the page loads so slowly that the user sees the control and clicks it before the rest of the page loads). For the code shown it shouldn't make any difference: jsfiddle.net/asa2rfeh

Question 9

@nnnnnn actually you are right I also tried it from a blank html just to test. It also weirded me out... it just kept on saying the Reference Error: loadData is not defined. Although the fix worked, I really want an explanation why in my case it wouldn't.

Question 10

@Reiion assuming you have more codes than what you've posted, you probably have some javascript error before where the function is defined.

Question 11

@Craftein yeah most probably but I can't really explain why it won't work at the bottom. The browser console tells nothing of any error too

Question 12

I've tested your html and everything seems to be working properly. The only error that I found was that $ajax is not a function. It is missing a dot $ajax => $.ajax

Try using:

function loadData(documentId){
 $.ajax({
 url:"/load",
 data: {'documentId': documentId},
 type: 'GET',
 success: function(){
 window.location.href = "http://127.0.0.1:8000/url/locations";
 }
 });
}

Question 13

sorry I had to edit that again in the post. my code has the dot in ajax but still doesn't work :(

Reiion 9433 gold badges20 silver badges37 bronze badges · Accepted Answer · 2016-10-19 02:11:55Z

2

Here's the fix (as my friend explained):

I had to put my script up in the <head> tags.

Why? Because the document is already loaded before the script gets to be.

If I want to retain it at the bottom it had to look something like this:

$(document).ready(
 $('input').onclick(function(){})

After putting it up the code works.

Share

Improve this answer

answered Oct 19, 2016 at 2:11

Reiion's user avatar

Reiion

9433 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nnnnnn

nnnnnn Over a year ago

That explanation doesn't really make sense for code called by a click event (unless the page loads so slowly that the user sees the control and clicks it before the rest of the page loads). For the code shown it shouldn't make any difference: jsfiddle.net/asa2rfeh

2016年10月19日T04:27:39.017Z+00:00

Reiion

Reiion Over a year ago

@nnnnnn actually you are right I also tried it from a blank html just to test. It also weirded me out... it just kept on saying the Reference Error: loadData is not defined. Although the fix worked, I really want an explanation why in my case it wouldn't.

2016年10月19日T04:45:38.537Z+00:00

Craftein

Craftein Over a year ago

@Reiion assuming you have more codes than what you've posted, you probably have some javascript error before where the function is defined.

2016年10月19日T13:18:11.873Z+00:00

Reiion

Reiion Over a year ago

@Craftein yeah most probably but I can't really explain why it won't work at the bottom. The browser console tells nothing of any error too

2016年10月19日T14:02:18.887Z+00:00

CollectivesTM on Stack Overflow

html javascript - onclick() reference error: function not defined

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related