Dropdown menu and how to use jQuery to change number of pictures requested

Question

I am trying to use jQuery to target my dropdown menu's list of numbers 1-50 and based on the number the user selects, show X number of images of a particular topic based on their number selection but I am unsure on how to write it.

This is what I have so far and I am particulaly stuck on my function numberOfDogs in JavaScript:

HTML:


  Pictures of Dogs
  Select the number of dogs you want to see

JavaScript:

'use strict';

function getDogImage() {
  fetch('https://dog.ceo/api/breeds/image/random/3')
    .then(response => response.json())
    .then(responseJson =>
      displayResults(responseJson))
    .catch(error => alert('Something went wrong. Try again later.'));
}

function displayResults(responseJson) {
  let templateString = "";
  console.log(responseJson);
  for (let i = 0; i < responseJson.message.length; i++) {
    templateString += ``;
  }
  $('.results').html(templateString);
  $('.results').removeClass('hidden');
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    getDogImage();
  });
}

function numberOfDogs() {
  $('dropdown-list')
}

$(function() {
  console.log('App loaded! Waiting for submit!')
  watchForm();
});

user_5277925 · Answer

You were close.

The numberOfDogs function could be like this:

function numberOfDogs() {
  let numDogs = $('#dropdown-list').val();
  return numDogs;
}

Where numDogs holds number of dogs selected. In jQuery, you should use the # by using $('#dropdown-list') to get the dropdown-list select element.

The getDogImage function could have a numDogs parameter. Then you can send the number of dogs in the url request. See the code below:

function getDogImage(numDogs) {
  fetch('https://dog.ceo/api/breeds/image/random/' + numDogs)
    .then(response => response.json())
    .then(responseJson =>
      displayResults(responseJson))
    .catch(error => alert('Something went wrong. Try again later.'));
}

Something like this:

(function() {
  'use strict';

  function getDogImage(numDogs) {
    fetch('https://dog.ceo/api/breeds/image/random/' + numDogs)
      .then(response => response.json())
      .then(responseJson =>
        displayResults(responseJson))
      .catch(error => alert('Something went wrong. Try again later.'));
  }

  function displayResults(responseJson) {
    let templateString = "";
    for (let i = 0; i < responseJson.message.length; i++) {
      templateString += ``;
    }
    $('.results').html(templateString);
    $('.results').removeClass('hidden');
  }

  function watchForm() {
    $('form').submit(event => {
      event.preventDefault();
      getDogImage(numberOfDogs());
    });
  }

  function numberOfDogs() {
    let numDogs = $('#dropdown-list').val();
    return numDogs;
  }

  $(function() {
    console.log('App loaded! Waiting for submit!');
    watchForm();
  });
}());

.hidden {
  display: none;
}



  Pictures of Dogs
  Select the number of dogs you want to see

Dropdown menu and how to use jQuery to change number of pictures requested

1 Answers