Api using input from HTML-CodePudding

Hey i can't understand why this isn't working. I'm getting two errors. The first is that value isn't a function and the second is that the '{' after "catch(error)", is an unexpected error. I don't get the '{' error, when i add the javascript directly into my html though.Thanks for any help. The script is wrapped in script but it messes with the code block when i enter it.

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>

CodePudding user response：

It seems that the input selector is missing the ' and #. Your input has the an ID with the value input

This wont work because it tries to select an element with by the value of input

const input = $(input);

Here we select and element with the ID (#) input (#input)

const input = $('#input');

CodePudding user response：

You should correct your code like this

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

Couple things you were missing the : before headers declaration and the input selector was wrong