HTML button not calling function

Question

this is my 1st javascript attempt and I'm getting the following in the chrome console:

"Uncaught ReferenceError: test1 is not defined."

I'm trying to send an Ajax request via onclick button event and display the data in the document. However, due to the error, I've scoped back to hello-world just for a debug attempt. Pardon this kind of question as I know its very elementary.

Any help is appreciated. Thanks for your time!

<!DOCTYPE html>
<html>
<head>
</head> 
<body>

<button onclick="test1()">Click Here</button>
<p id="Data"></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

function test1(){
alert("Hello, World");
/* $.ajax({
    url: Target_URL,
    headers: {
        'Accept':'application/json',
        'authorization', 'Bearer ' + vToken
    },
    method: 'GET'
   // dataType: 'json',
   // data: YourData,
    success: ajaxCall = data
  }); */
}
</script>

</body>

</html>

Try removing the `src`. The function is a named one, so, it should be hoisted on compile-time. — Ismael Miguel, Mar 29 '16 at 23:46
check this, javascript code is true but your html code its no good, check this http://dojo.telerik.com/ewiCE — Enrique YC, Mar 29 '16 at 23:54

score 7 · Accepted Answer · answered Mar 29 '16 at 23:50

7

You used only one script tag for loading jquery and for your method - that will not work... "If a script element has a src attribute specified, it should not have a script embedded inside its tags." here a working solution:

<!DOCTYPE html>
<html>
<head>
</head> 
<body>

<button onclick="test1()">Click Here</button>
<p id="Data"></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
/* $.ajax({
    url: Target_URL,
    headers: {
        'Accept':'application/json',
        'authorization', 'Bearer ' + vToken
    },
    method: 'GET'
   // dataType: 'json',
   // data: YourData,
    success: ajaxCall = data
  }); */
}
</script>

</body>

</html>

answered Mar 29 '16 at 23:50

Meiko Rachimow

4,664
2
25
43

3

This is the right solution. An extention to my lazy comment. – Ismael Miguel Mar 29 '16 at 23:54
You should really put your js either in the head, or an external file though :) – Stuart Mar 30 '16 at 00:10
maybe, but this was not the problem and topic here ... as a reference: http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file – Meiko Rachimow Mar 30 '16 at 00:30

score 1 · Answer 2 · edited Mar 30 '16 at 01:04

You can't place your javascript code in same <script> tag where you linked an external file (it shouldn't be included in <script src="..."> function </script>). Your test1 function should be separated from scr javascript tag. Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">/<script>
<script> your javascript function should be here </script>

Hope this will solve your problem.

Stuart · Answer 3 · 2016-03-30T00:01:29.693

-1

Put the JavaScript in the head of your document, and separate out the script for including jquery and your actual code.

<!DOCTYPE html>
<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<script>
function test1(){
    alert("Hello, World");
}
</script>
</head> 
<body>
    <button onclick="test1()">Click Here</button>
    <p id="Data"></p>
</body>
</html>

edited Mar 30 '16 at 00:01

answered Mar 29 '16 at 23:46

Stuart

6,630
2
24
40

1

The function is defined just fine. The problem is trying to load an external script and writing code inside the same script tag. – Ryan Dantzler Mar 29 '16 at 23:52
Down voted for a correct answer? Is SO going all Redditty? – Stuart Mar 30 '16 at 00:00

krishna Prasad · Answer 4 · 2016-03-30T00:22:56.750

You haven't placed your javascript method in proper javascript tag, separately place javascript method and javascript src, please check below for more clarification:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script type="text/javascript">
  function test1() {
    alert("Hello, World");
  }
/* $.ajax({
    url: Target_URL,
    headers: {
        'Accept':'application/json',
        'authorization', 'Bearer ' + vToken
    },
    method: 'GET'
   // dataType: 'json',
   // data: YourData,
    success: ajaxCall = data
  }); */
</script>

</head> 
<body>

<button onclick="test1()">Click Here</button>
<p id="Data"></p>

</body>

</html>

st_443 · Answer 5 · 2016-03-31T02:21:11.883

-3

First off, you need to declare your JavaScript function before you call it.

Change to this:

<!DOCTYPE html>
<html>
<head>
</head> 
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
<script>
    function test1(){
        alert("Hello, World");
    }
</script>

<button onClick="test1()">Click Here</button>
<p id="Data"></p>

</body>

</html>

edited Mar 31 '16 at 02:21

answered Mar 29 '16 at 23:51

st_443

51
1
6

The function is defined just fine. The problem is trying to load an external script and writing code inside the same script tag. – Ryan Dantzler Mar 29 '16 at 23:52

HTML button not calling function

5 Answers5

Linked