Api 使用来自 HTML 的输入

Question

嘿，我不明白为什么这不起作用。我收到两个错误。第一个是值不是函数，第二个是“catch(error)”之后的“{”是一个意外错误。当我将 javascript 直接添加到我的 html though.Thanks 中寻求任何帮助时，我没有收到“{”错误。该脚本包含在脚本中，但当我输入它时它会弄乱代码块。

const value = async() => {

const input = $(input);
try{
    const response = await fetch(`https://wordsapiv1.p.rapidapi.com/words/hatchback/typeOf?=${input}`, {
      method: 'GET',
      headers{
          'X-RapidAPI-Host': 'wordsapiv1.p.rapidapi.com',
          'X-RapidAPI-Key': '6bf945be36msh9deedbbf5135343p16d366jsnd17d03ee5bd4'
      }
    })
    
    const jsonResponse = response.json();
    alert(`${jsonResponse}`)

} catch(error) {
    console.log(error);
}
}; 




<input type="text" placeholder="enter location" id="input">
<button onclick="value()"></button>

Answer 1

似乎输入 select 或缺少 ' 和 #。您输入的 ID 值为 input

这行不通，因为它试图 select 一个值为 input

的元素

const input = $(input);

这里我们select和ID为(#)的元素输入(#input)

const input = $('#input');

要获取元素的值，只需使用 .val()

const input = $('#input').val();

Answer 2

您应该像这样更正您的代码

var value = async() => {
    const input = $("#input").val();
    try {
        const response = await fetch(
        `https://wordsapiv1.p.rapidapi.com/words/hatchback/typeOf?location=` + input, {
            method: 'GET',
            headers: {
                'X-RapidAPI-Host': 'wordsapiv1.p.rapidapi.com',
                'X-RapidAPI-Key': '6bf945be36msh9deedbbf5135343p16d366jsnd17d03ee5bd4'
            }
        })

        const jsonResponse = response.json();
        alert(`${jsonResponse}`)

    } catch (error) {
        console.log(error);
    }
}

你在 headers 声明之前遗漏了 : 并且输入选择器错误

Api 使用来自 HTML 的输入

Api using input from HTML

html

javascript

api