javascript - 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:

<div class="container">
  <h1>Pictures of Dogs</h1>
  <label>Select the number of dogs you want to see</label>
  <select id="dropdown-list" autocomplete="off">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
    <option value="49">49</option>
    <option value="50">50</option>
  </select>
  <form>
    <input type="submit" value="Submit">
  </form>
  <section class="results hidden">
    <img class="results-img" alt="placeholder">
  </section>
</div>

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 += `<img src="${responseJson.message[i]}" class="results-img">`;
  }
  $('.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();
});

question from:https://stackoverflow.com/questions/65649351/dropdown-menu-and-how-to-use-jquery-to-change-number-of-pictures-requested

Answer 1

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 += `<img src="${responseJson.message[i]}" class="results-img">`;
    }
    $('.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Pictures of Dogs</h1>
  <label>Select the number of dogs you want to see</label>
  <select id="dropdown-list" autocomplete="off">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
    <option value="49">49</option>
    <option value="50">50</option>
  </select>
  <form>
    <input type="submit" value="Submit">
  </form>
  <section class="results hidden">
    <img class="results-img" alt="placeholder">
  </section>
</div>