Help with wiki code

Hey all,

Having some issues with the javascript portion of the wiki app project. I have the wiki api working correctly when i manually put in the search parameters but I am not able to figure out how to take the user input as the search results. What I need help with is how do I have my code run the function for getting the value of the text that is entered first and then run the ajax code to get the value for my input. I am looking for solutions using vanilla javascript. From what i searched I think I can do it using call backs but I don’t understand how to use it correctly. Please help me. below is my code pen. So far it console logs the value of the text input but doesn’t put the value into the ajax url i assume because all the code runs at once. I had this problem with the weather app as well and did a timeout on it but I know that’s not the best way to do it and I am having issues figuring out the correct solution.

https://codepen.io/mcdanije/pen/KRaeqg

I see a couple of problems with your code that are an easy fix…

Your event handler function one never calls function results. Function results will need be to called and pass the text in the search form as an argument. Something like

results(input);

The function results does not have a parameter to accept the input from your form. That function relies on there being a value passed in to variable input.

function results(input) {

Your Javascript should work something like this.
Once user presses ENTER while in text box

function one(){
   get key code
   if keycode is ENTER key
       then 
          var input = value in the textbox  //be sure to use var here
          results(input)  //call results, passing input
}

function results(input){  //take input as an argument to use inside function
   use input to form a url string
   get response from http request
   put that data up on your page
}

Also, be sure to declare all your variables with var (or let or const). You had not done that in function one and that let the variable input become available everywhere in your code - generally not a good thing.

Good Luck!

oh my god this is what i was looking for, thank you so much! Just to make sure I understand this correctly, function one goes off as soon as the user hits enter then putting results() at the end it calls the function results with the variable input as a argument which passes the variable into the new function. So in doing this it basically wont load the results function until function one is done, correct? Also I thought I was suppose to declare variables globally so that all my functions can access them but in reality I should keep everything locally?

Again thank you so much! I have been looking at this issues all day long haha.

I’m glad this helped you.

You could put all the results code into your event handler but I usually like to keep functions short and simple (and you might want to reuse that results function elsewhere).