JavaScript - Connect JavaScript with HTML

Question

So I started by making a plain HTML which I'm really proud of right now but I can't get the Javascript to work with it for a reason. I never really worked with Javascript before. I started with it yesterday and got a bit help with it but not it doesn't work anymore. So I have made this so far:

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

    <h1>Movie Search</h1>

    <form id="searchForm" method="post">
        <fieldset>

            <input id="s" type="text" />

            <input type="submit" value="Submit" id="submitButton" />

            <div id="searchInContainer">
                <input type="radio" name="check" value="site" id="searchSite" checked />
                <label for="searchSite" id="siteNameLabel">Search movie</label>

                <input type="radio" name="check" value="web" id="searchWeb" />
                <label for="searchWeb">Search series</label>
            </div>

        </fieldset>
    </form>

<div id="resultsDiv"></div>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<div id="poster"></div>
<div id="trailer"></div>



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

and I doubt I have to show you guys the CSS right now since it doesn't do really much right now if i'm correct.

however I'm using this JS which I made by help from here but it didn't go as planned.

function callAjax(input) {
  var url = "http://localhost:1337/search/" + input;

  $.ajax({
    type: 'GET',
    url: url,
    success: function(data) {
      console.log('SUCCESS');
      $('#title').html("Title: " + data.title);
      $('#release').html("Release: " + data.release);
      $('#vote').html("Vote: " + data.vote);
      $('#overview').html("Overview: " + data.overview);
      $('#poster').html('<img src="' + data.poster + '" width=250 height=450 />');
      $('#trailer').html("Trailer: " + data.trailer);



    },
    error: function(request, status, err) {
      console.log('ERROR');
    }
  });
}

$(document).ready(function() {

  $('#get-json').on('click', function(e) {
    e.preventDefault();

    var input = $('#data').val().trim();
    callAjax(input);
  });

});

So basically my plan is to make when I search for a movie title which I write on the search box and then press search, it should come below information from my API which I made by myself which says everything in the JavaScript already. so what I really want to do now is when pressing search it should at least connect to API and say something just to make sure its working.

EDIT: My plan is to make something like this:

Just wanted to show you so you guys have a idea similar what I want to make it look like.

Answer 1

This:

  $('#get-json').on('click', function(e) {

… does something when the element with id=get-json is clicked.

And this:

 var input = $('#data').val().trim();

… attempts to read the value from an element with id=data .

You don't have elements with those IDs anywhere in your document.

JavaScript - Connect JavaScript with HTML

Question

1 answers

solution1
3 ACCPTED

JavaScript - Connect JavaScript with HTML

Question

1 answers

solution1 3 ACCPTED

solution1
3 ACCPTED