What do I need to put in the class part of my section tag?

Question

I'm using eclipse to write an html page that uses a JavaScript function that connects to the google BookAPI. I based mine off of the one I found here (https://codepen.io/mkokes/pen/KqvZNY). I changed it slightly so that instead of using an ISBN number it uses the name of the book and the author to find the cover page.

I get a result on the book but its the wrong one (always the same one so I assume its a problem when I call the script).

My code to call and use the script looks like this:

<section class="styles" data-title="Animal Farm" data-author="George Orwell">
  
  <img src="" alt="" class="thumbnail" />  
  
  <header>
    <h3 class="title"></h3>
    <h4 class="author"></h4>
  </header>
  
</section>

The styles is the css that I use to format the page. Is that the right thing to put there or am I completely wrong?

My JavaScript is as follows:

var title = $('.book').data('title');
var author = $('.book').data('author');

$.ajax({
  dataType: 'json',
  url: 'https://www.googleapis.com/books/v1/volumes?q=' + title + '+inauthor:' + author + '&orderBy=relevance&maxResults=1',
  success: handleResponse
});

function handleResponse( response ) {
  $.each( response.items, function( i, item ) {
    
    var title    = item.volumeInfo.title,
        author   = item.volumeInfo.authors[0],        
        thumb    = item.volumeInfo.imageLinks.thumbnail;
    
    $('.title').text( title );
    $('.author').text( author );
    $('.thumbnail').attr('src', thumb);
  });
}

If anyone has any suggestions I'd really appreciate it. Would be great to finally get this working.

Answer 1

I think you are a bit mixed up on CSS classes. Think of it this way:

The id attribute in HTML is a unique identifier, no other element on the page can use that same ID. There's only one. Exmaple <div id="navigation">

The class attribute in HTML can contain multiple classes. A "class" is basically just another identifier, but the page can contain multiples of these. A good example of this for your code would be .book however it looks as if your HTML doesn't actually use that class anywhere. Perhaps this should be: <section class='book'

You currently have class="styles" on that, and I think that's where you're mixed up, unless you actually have a CSS selector for .styles somewhere, and if you did you should rename that to something that's more descriptive.

Also, both the id and class attributes can be used in CSS and in JS for selecting elements.

I've re-written your code a bit and added some styles for an example.

var books = $('.book'); //This will select all of the .book elements and return an array

//Now we can loop through each selected .book element: https://api.jquery.com/each/
books.each(function(){
  var thisBook = $(this);
  var title = thisBook.data('title');
  var author = thisBook.data('author');

  $.ajax({
    dataType: 'json',
    url: 'https://www.googleapis.com/books/v1/volumes?q=' + title + '+inauthor:' + author + '&orderBy=relevance&maxResults=1',
    success: function(response){
      handleResponse(thisBook, response);
    }
  });
});

function handleResponse( thisBook, response ) {
  $.each( response.items, function( i, item ) {
    
    var title    = item.volumeInfo.title,
        author   = item.volumeInfo.authors[0],        
        thumb    = item.volumeInfo.imageLinks.thumbnail;
    
    thisBook.find('.title').text( title );
    thisBook.find('.author').text( author );
    thisBook.find('.thumbnail').attr('src', thumb);
  });
}

.book {
  border: 1px solid #333;
  padding: 5px;
  margin-bottom: 10px;
}

.book .thumbnail {
  max-height: 200px;
  margin-right: 10px;
  float: left;
}

.book header {
  background: #CCC;
  
}

.book .title{
  margin-top: 0;
}

.book author {

}

.clear {
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="book" data-title="Animal Farm" data-author="George Orwell">
  
  <img src="" alt="" class="thumbnail" />  
  
  <header>
    <h3 class="title"></h3>
    <h4 class="author"></h4>
  </header>
  
  <div class='clear'></div>
</section>

<section class="book" data-title="The Great Gatsby" data-author="F. Scott Fitzgerald">
  
  <img src="" alt="" class="thumbnail" />  
  
  <header>
    <h3 class="title"></h3>
    <h4 class="author"></h4>
  </header>
  
  <div class='clear'></div>
</section>

<section class="book" data-title="Moby Dick" data-author="Herman Melville">
  
  <img src="" alt="" class="thumbnail" />  
  
  <header>
    <h3 class="title"></h3>
    <h4 class="author"></h4>
  </header>
  
  <div class='clear'></div>
</section>

Answer 2

<section class="styles" data-title="Animal Farm" data-author="George Orwell">

should be

<section class="styles book" data-title="Animal Farm" data-author="George Orwell">

so that you can then look for the data attributes in your js with:

var title = $('.book').data('title');
var author = $('.book').data('author');

I don't know what you use styles class for but you can keep it even in case it is unused.

When you do $('.book'). in jquery you are looking for all the items on your page with the class book. When you do $('#book'). you look for the objcet with the id book (ids are unique in a page). In your html you will probably have many different classes and ids that are not related (or may be not related) to any css rule but used only for js purposes