我创建了一个相当简单的应用程序来查询第三方 API。
我的问题是我希望在控制台中获取整个 URI http://uinames.com/api/?region=japan& (请参阅 console.log(…))，但我只得到 ?region=japan& 部分。
我没有收到任何错误，有人能发现我的实现有什么问题吗？
我的代码
// 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>最佳答案
效果很好。
不过我修复了一些错误。
const origin = document.getElementById('#country').value
应该是(没有#)
const origin = document.getElementById('country').value
没有为select分配id输入
<select class="u-full-width" name="country" id="country">
如果你运行 fiddle ，你会看到它按预期工作。
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>关于javascript - JS代码未成功查询API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48951273/