Issue with my function in my JavaScript

Question

I am trying to switch from a very basic webpage into anthor one but i face some issues with the result once i click on getAll

My previous webpage (the wroking one )

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <button onclick="getAll()"> Get All The Users </button>

    <div id="users"></div>

    <script>
        function getAll()
        
        {
            $("#users").html("");
            
            
        
            $.getJSON("http://localhost:8080/users",  function(data)
            {
                for (var i in data) {
                    $('#users').append("<p>ID: " + data[i].id + "</p>")
                    $('#users').append("<p>First name: " + data[i].fname + "</p>")
                    $('#users').append("<p>Last name: " + data[i].lname + "</p><br>")
                }
            }); 
            
        }
        
    </script>
</body>
</html>

Here is the error:

Uncaught ReferenceError: getAll is not defined
    at HTMLButtonElement.onclick (testt.html:96)
onclick @ @ testt.html:96
testt.html:145 

Uncaught ReferenceError: screenfull is not defined
    at HTMLDivElement.<anonymous> (testt.html:145)
(anonymous) @ testt.html:145

EDITED After Nina´s answer i get the desired result but the homepage looks like this:

The result

So it distorts the upper part of my homepage.

“getAll is not defined” - when you’re using “old-school” event handling via HTML attributes, the function must exist before that element occurs in the DOM. But since you are using jQuery already, you should rather deal with the button click event the jQuery way, too. — C3roe
– C3roe, Commented Aug 10, 2017 at 13:37

Nina Scholz · Accepted Answer · 2017-08-10 13:33:49Z

1

You need to change

<div id="requestfs">/div>

to

<div id="requestfs"></div>

And you need to change this line

$.getJSON("http://localhost:8080/users" ,  function(data[i])
//                                                      ^^^

to (without index)

$.getJSON("http://localhost:8080/users" ,  function(data)

At least you need to include the library somewhere, before using it.

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

Optional you could use the type attribute as well

<script type="text/javascript">

edited Aug 10, 2017 at 13:33

answered Aug 10, 2017 at 13:16

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

jhpratt Over a year ago

text/javascript is assumed if not specified. There's no need to do this.

fresh mouse · Accepted Answer · 2017-08-10 13:29:35Z

0

When you declare a function, the { should be on the same line with the function keyword. For example:

function foo() {

}

You should change all of those(note, they are on line 110 and line 20).

Next, in the line

$.getJSON("http://localhost:8080/users" ,  function(data[i]) {

function (data[i]) should be function (data)

Also, remember to include the jquery library.

answered Aug 10, 2017 at 13:29

fresh mouse

3921 silver badge6 bronze badges

2 Comments

C3roe Over a year ago

“When you declare a function, the { should be on the same line with the function keyword” - that’s only a coding convention, but has nothing to do with the problem itself. Both variants are valid JS.

fresh mouse Over a year ago

Well, it has an exception, if you use the return keyword to return an object, it will cause an error(and it is very hard to find). It is a good coding practice. See youtube.com/… at 19:58.

Collectives™ on Stack Overflow

Issue with my function in my JavaScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related