CODEWITHSUNDEEP
javascript
user8359832
user8359832

Reputation:

JS code not successfully querying the API

I created a fairly simple application to query a third-party API.

My issue is that I expected to get the entire URI http://uinames.com/api/?region=japan& in the console (see console.log(…)) but I only get the ?region=japan& part.

I am not getting any error, does anyone can spot what is wrong with my implementation ?

My code

// Execute the function to query the API
function loadNames(e) {
  e.preventDefault();

  // Read the values from the form and create the variables
  const origin = document.getElementById('#country').value;
  const gender = document.getElementById('gender').value;
  const amount = document.getElementById('quantity').value;

  // Build the URL
  let url = 'http://uinames.com/api/?';
  // Read the origin and append to url
  if (origin !== '') {
    url += `region=${origin}&`;
  }

  console.log(url);
}

document.querySelector('#generate-names').addEventListener('submit', loadNames);
<body>
  <div class="container">
    <div id="content" class="content">
      <h1>Generate Names</h1>
      <form id="generate-names" action="#">
        <div class="row">
          <div class="six-columns">
            <label for="country">Filter By Country:</label>
            <select class="u-full-width" name="country">
              <option value="">-- Select --</option>
              <option value="argentina">Argentina</option>
              <option value="brasil">Brasil</option>
              <option value="colombia">Colombia</option>
              <option value="costa rica">Costa Rica</option>
              <option value="france">France</option>
              <option value="italy">Italy</option>
              <option value="mexico">Mexico</option>
              <option value="portugal">Portugal</option>
              <option value="united states">United States</option>
              <option value="india">India</option>
              <option value="japan">Japan</option>
            </select>
            <label for="gender">Gender:</label>
            <select class="u-full-width" id="gender">
              <option value="">-- Select --</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
            <label>Number of names to generate</label>
            <input type="number" id="quantity" class="u-full-width" min="5" max="15" value="5">
            <input class="button-primary u-full-width" type="submit" value="Generate">
          </div>

          <div class="six-columns">
            <div id="result"></div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

Upvotes: 0

Views: 43

Answers (1)

Red
Red

Reputation: 7324

It works fine.

I fixed a few errors though.

const origin = document.getElementById('#country').value

Should be (without the #)

const origin = document.getElementById('country').value

No id had been asigned to the select input

<select class="u-full-width" name="country" id="country">

If you run the fiddle, you will see it works as expected.

document.querySelector('#generate-names').addEventListener('submit', loadNames);

// Execute the function to query the API
function loadNames(e) {
  e.preventDefault();

  // Read the values from the form and create the variables
  const origin = document.getElementById('country').value;
  const gender = document.getElementById('gender').value;
  const amount = document.getElementById('quantity').value;

  // Build the URL
  let url = 'http://uinames.com/api/?';
  // Read the origin and append to url
  if (origin !== '') {
    url += `region=${origin}&`;
  }

  console.log(url);
}
<div class="container">
    <div id="content" class="content">
      <h1>Generate Names</h1>
      <form id="generate-names" action="#">
        <div class="row">
          <div class="six-columns">
            <label for="country">Filter By Country:</label>
            <select class="u-full-width" name="country" id="country">
              <option value="">-- Select --</option>
              <option value="argentina">Argentina</option>
              <option value="brasil">Brasil</option>
              <option value="colombia">Colombia</option>
              <option value="costa rica">Costa Rica</option>
              <option value="france">France</option>
              <option value="italy">Italy</option>
              <option value="mexico">Mexico</option>
              <option value="portugal">Portugal</option>
              <option value="united states">United States</option>
              <option value="india">India</option>
              <option value="japan">Japan</option>
            </select>
            <label for="gender">Gender:</label>
            <select class="u-full-width" id="gender">
              <option value="">-- Select --</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
            <label>Number of names to generate</label>
            <input type="number" id="quantity" class="u-full-width" min="5" max="15" value="5">
            <input class="button-primary u-full-width" type="submit" value="Generate">
          </div>

          <div class="six-columns">
            <div id="result"></div>
          </div>
        </div>
      </form>
    </div>
    </div>

Upvotes: 2

Related Questions