Api using input from HTML

Question

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>

you really should not post your application keys in questions. — OldProgrammer
– OldProgrammer, Commented Mar 23, 2022 at 21:09
Don't worry, it's a generic api, that everyone has access to. Thank you though — HighlandRocket
– HighlandRocket, Commented Mar 23, 2022 at 22:08

Synapsis · Accepted Answer · 2022-03-23 21:37:22Z

1

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

answered Mar 23, 2022 at 21:37

Synapsis

1,0471 gold badge8 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HighlandRocket Over a year ago

Thank you so much! That will be why it keeps detecting '{' as an incorrect input! Also having # completely missed me in my learning. Absolute legend, thank you!

Synapsis Over a year ago

@HighlandRocket no problem man!! Good to hear that it worked. Please assign this as the correct answer so that other people can read the solution to this problem

Vincent Harrius · Accepted Answer · 2022-03-23 22:16:01Z

0

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

And to get the value of the element simply use .val()

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

edited Mar 23, 2022 at 22:16

answered Mar 23, 2022 at 21:21

Vincent Harrius

94 bronze badges

1 Comment

HighlandRocket Over a year ago

Thank you a million! I've spent so long learning intermediate topics, that i've missed a few things from my earlier topics!. You're amazing, sorry i can't upvote yet!

Collectives™ on Stack Overflow

Api using input from HTML

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related