Question

我创建了一个相当简单的应用程序来查询第三方API。

我的问题是，我希望在控制台中获取整个URI http://uinames.com/api/?region=japan&（请参阅console.log(…)），但我只获得?region=japan&部分。

我没有收到任何错误，是否有人能够发现我的实施有什么问题？

我的代码

＆＃13;

// 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);

＆＃13;

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

＆＃13;

Answer 1

工作正常。

我修复了一些错误。

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

应该是（没有＃）

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

没有id被归为select 输入

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

如果您操作小提琴，您将看到它按预期工作。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

JS代码未成功查询API

1 个答案: