Wikipedia Viewer - can't do another search

Hi. Really enjoying these projects but I’ve got an issue on the wikipedia viewer I decided to use JS for this and am able to get search results but have 2 issues.

  1. I cannot do another search after the first.
  2. Can’t search by pressing ‘enter’.

This is my first post so I am not sure how to show the code here but here is the link :slight_smile:

I am able to perform multiple searches after the first. You may not think you are, because your current code just keeps appending to the last search results. Scroll down the page after performing multiple search and you will see for yourself.

I do not see any code with an event listener looking for the enter key to be pressed.

ah. cheers. i do see that now although not entirely sure how to fix it.

I had an event listener listening for keydown but that didn’t quite work . Is there an event listener for the enter button?

thank you

1 Like

I’ve added an event listener now and am able to console.log “hello” on enter, however i’m still unable to call the searchWiki function.

The issue is that you are using a form element, which is not need for this project. If you remove the form element and it’s closing tag, but keep the other elements that were nested in it, then you code would “almost” work. I say “almost”, because you need to add () to the end of searchWiki to actually execute the function.

Why is the form element an issue? Because form elements use the action attribute to open a new page. If the action attribute is missing or is set to “” (which yours is), the default page to open is the current page. That is why the page appears to flicker and not do anything. If you want to leave the form element in your code, then you will need to detect the Enter key a slightly different way. Instead of listening for the keyup event, your code needs to listen for the keydown event and then check if event.key is equal to “Enter”. If it is, then you must use event.preventDefault() to prevent the form from submitting and then call searchWiki.

thnk you so much. I tried both and they both work well. I had a feeling it was something in my form.

I do still have one other issue in that while I can do multiple searches after another, each serch is appended to the old. I can fix this by clearing the results like this

results.innerHTML = " ";
results.insertAdjacentHTML(“beforeend”, item);

however then I am only getting one search result instead of the 5 I want.

You are on the right track.

You definitely want to use results.innerHTML = “”; The trick is where to put it.

Currently, it is inside your for loop, so every iteration, you are blanking out the previous result, so only your last one will show.

Also, even though your code (seen below) works:

results.insertAdjacentHTML(“beforeend”, item);

why not just use:

results.innerHTML += item;
1 Like

You are super. I did it thanks to your help. I could tell that was the reason but wasn’t sure what to do about it or where to put it. Learned a lot in the last 30 minutes (struggling with a problem is painful but great). Thank you.