Integrating HTML and Javascript

Question

so i'm trying to use an API to get a random word (http://randomword.setgetgo.com) and then use it to store the random word as a variable in javascript and then print that variable to the screen. My Code is

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js">
    var word = $.get("http://randomword.setgetgo.com/get.php");
    document.WriteIn(word);
</script>

However nothing is being written to the HTML document.

Could anyone help explain this a little bit and point me in the write direciton to get this working? I'm just starting to learn web development.

Thanks.

possible duplicate of [Why isn't this very simple JQuery working?](http://stackoverflow.com/questions/21488145/why-isnt-this-very-simple-jquery-working) — zzzzBov, Apr 09 '14 at 03:28
1) fix your script tag (use one to load jquery, then another to enclose your scripts on-page) 2) you are attempting output a string likely before it's been retrieved from the server. — DA., Apr 09 '14 at 03:33

score 4 · Answer 1 · edited May 23 '17 at 12:13

4

Thre are multiple problmes...

script cannot have both src and content - see doc for src
you need to use a callback to handle the response of an ajax call - How to return the response from an AJAX call?
if it is a cross domain request, make sure cors support is enabled in the target site

so

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
    $.get("http://randomword.setgetgo.com/get.php", function(content){
        $('body').append(content)
    });
</script>

edited May 23 '17 at 12:13

Community

1
1

answered Apr 09 '14 at 03:29

Arun P Johny

384,651
66
527
531

`XMLHttpRequest cannot load http://randomword.setgetgo.com/get.php. Origin http://run.plnkr.co is not allowed by Access-Control-Allow-Origin.` – Jess Apr 09 '14 at 03:46
@Jess because you are trying to make cross domain ajax request... which is not permitted by Same Origin Policy – Arun P Johny Apr 09 '14 at 03:47
Oh yes I know. Sorry I should have posted more info. I was documenting it for the OP. – Jess Apr 09 '14 at 12:48

score 1 · Answer 2 · answered Apr 09 '14 at 03:27

1

Put your scripts between <\script> tags, usually in the -section of your document. Then call it from the point you like.

I recommend looking at some tutorials, since these are the very basics that bug you

answered Apr 09 '14 at 03:27

Kevin Grabher

399
1
4
18

It is. Had some problems in original posts formatting. – user3513466 Apr 09 '14 at 03:28

score 0 · Answer 3 · answered Apr 09 '14 at 03:25

0

You need to put your code in <script> tags.

You also need to make sure that you have included the jQuery library.

answered Apr 09 '14 at 03:25

Neel

597
6
19

score 0 · Answer 4 · answered Apr 09 '14 at 03:28

0

Why don't you put the random word in a div?

Like so:

$("#theDiv").text(word);

And you need to put your code in a separate <script> element that does not have a src attribute.

answered Apr 09 '14 at 03:28

laptou

6,389
2
28
59

score 0 · Answer 5 · answered Apr 09 '14 at 03:29

You can't both set the [src] attribute and the contents of the <script> tag. If you need two scripts, you need to use two script tags:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
    var word = $.get("http://randomword.setgetgo.com/get.php");
    document.WriteIn(word);
</script>

Additionally, $.get runs asynchronously and will not return the contents of the url request.

document.WriteIn is not a function, unless you've defined it somewhere.

If you just need to dump the contents of the GET request after the executing script, you could use:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
    (function () {
        var $script;
        $script = $('script').last();
        $.get('http://randomword.setgetgo.com/get.php', function (data) {
            $script.append(data);
        });
    }());
</script>

Integrating HTML and Javascript

5 Answers5