Javascript search value-CodePudding

my search query is not working and I don't know why!

I have inserted a button to run the function and a function to accept the variable from search, yet tho, the code gets stuck with a default that I don't even know where it's getting from...

<div >
  <h1>Timezone API</h1>
</div>
<div ></div>
<input  type="text" placeholder="Insert location"></input>
<button type="button" onClick="getTimezone()">Search</button>

$(document).ready(function() {
  getTimezone();
})

function searchlocation() {
  var searchQuery = $(".search").val();
  getTimezone(searchQuery);
}

async function getTimezone(searchQuery) {
  var url = "https://timezone.abstractapi.com/v1/current_time/?api_key=[REDACTED]&location="   searchQuery;

  $.ajax(url, {
    success: function(data) {
      console.log(data);
    }
    }
  })
}

Can someone help me with this?

CodePudding user response：

My guess is that it's because you're using the wrong function here:

<button type="button" onClick="getTimezone()">Search</button>

I think you want to use searchlocation() there, not getTimezone()

CodePudding user response：

You are calling getTimezone() without any parameter however your function implementation expects one.

My guess is that you want to return the promise from getTimezone func and call it on button click while the value for the query is taken from the text field


<div >
  <h1>Timezone API</h1>
</div>
<div ></div>
<input  type="text" placeholder="Insert location"></input>
<button type="button">Search</button>

async function getTimezone(searchQuery) {
  var url = "https://timezone.abstractapi.com/v1/current_time/?api_key=[REDACTED]&location="   searchQuery;

  return new Promise(resolve => {
    $.ajax(url, {
      success: function(data) {
        resolve(data);
      }
    })
  })
}


$("button")
  .on("click", async function(){
    const val = $(".search").val();
    const result = await getTimezone(val);
    console.log(result);
  });