How to connect a submit click event to an input value to query an api-CodePudding

document.addEventListener("click", function (event) {
    // Checking if the button was clicked
    if (!event.target.matches("#button")) return;


 
    const options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Host': 'google-web-search.p.rapidapi.com',
            'X-RapidAPI-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
        }
    };

    fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
        .then(response => response.json())
        .then(response => rendersearch(response))
        .catch(err => console.error(err));
  
  });

  function rendersearch(response) {
    const setup = document.getElementById("setup");

    setup.innerHTML = response.setup;
  
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="sketch.js"></script>
    <title>Document</title>
</head>
<body>
    <form>
    <input id="input" type="text" name="name" value=""> 
    <button id="button" type='button'>Submit</button>
</form>
<p id="setup"></p>

</body>
</html>

I need to use user input to query an api and get the search result displayed on the screen. i'm having trouble connecting the button click event with the input change listener. kindly help

document.addEventListener("click", function (event) {
    // Checking if the button was clicked
    if (!event.target.matches("#button")) return;


 
  
    };

    fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
        .then(response => response.json())
        .then(response => rendersearch(response))
        .catch(err => console.error(err));
  
  });

  function rendersearch(response) {
    const setup = document.getElementById("setup");

    setup.innerHTML = response.setup;
  
  }

i'm getting undefined when i try to search but in the console.log its fetching correctly i dont know what might be the problem

CodePudding user response：

Very likely the response object does not contain a field called setup, maybe you can try to change

.then(response => rendersearch(response))

.then(response => console.log(JSON.stringify(response)))

to see what response you got in the console first, then pass the desired field to rendersearch()

CodePudding user response：

Hello I had a similar issue to you and this is what I found to be the solution notice how I assigned a variable (button) to the thing I wanted the user to click on (a button)

and then rather than document.addEventListener I used button.addEventListener (you can change button to the variable assigned to whatever thing you wanted to be clicked and it should then work your issue is simply incorrect syntax for the addEventlistner function no other line of your code seems to be incorrect

I hope that helped

enter image description here

CodePudding user response：

You have a closing tag }; to mucht, the event listener should work if you delete it. I do not know if the API call is working corectly.

document.addEventListener("click", function (event) {
    // Checking if the button was clicked
    if (!event.target.matches("#button")) return;

    //delete this one and it should work:
    //};

    fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
        .then(response => response.json())
        .then(response => rendersearch(response))
        .catch(err => console.error(err));
  
  });