javascript issue calling function after adding event listener

Question

I am working on a wikipedia viewer (https://codepen.io/rwiens/pen/YLMwBa) which is almost done but I have 2 problems:

I cannot submit my search results when I press enter. I have added an event listener and can console.log "hello: but I cannot call the searchWiki function.
When I do a new search the results are appended to the bottom pf my old results.

I've searched the web for the last half day and am stuck. Any help would be appreciated.

 <div class="container">
    <div class="banner text-center align-items">
        <h1>Wiki Search</h1>
        <p>Search for articles on Wikipedia</p>
    </div>
    <form action="" class="text-center">
        <input type="search" id="search-box" placeholder="Search Here">
        <div class="buttons">
            <input type="button" onclick="searchWiki()" id="search- 
             button" value="Search">
            <input type="submit" value="Feel Lucky?">
        </div>
    </form>
    <div class="articles">
        <ul id="results">


        </ul>
    </div>
 </div>


 <script type="test/javascript">

    const searchBox = document.getElementById('search-box');
    const sButton = document.getElementById('search-button');
    const results = document.getElementById('results');


    window.onload = function() {
    searchBox.focus();
    };

    const searchWiki = () => {
        const keyword = searchBox.value;
     fetch("https://en.wikipedia.org/w/api.php? 
     &origin=*&action=opensearch&search=" + keyword + "&limit=5", {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
     },
     body: JSON.stringify({ query: event.currentTarget.value })
    })
      .then(response => response.json())
      .then((data) => {
        console.log(data);
        build(data); 
     });
    }


    const build = (data) => {
      let title = data[1];
      let description = data[2];
      let url = data[3];
    for(let x = 0; x < 5; x++){
        console.log(title);
        const item = `<a href="${url[x]}" target="#">
                    <li>
                    <h5>${title[x]}</h5>
                    <p>${description[x]}.</p>
                </li>
                </a>`;
        results.insertAdjacentHTML("beforeend", item);
     }

     }

     searchBox.addEventListener("keyup", function(event) {
     if (event.key === "Enter") {
        searchWiki;
    }
    });
    </script>

Nandita Sharma · Accepted Answer · 2018-05-23 09:01:02Z

1

You are not calling searchWiki as function. Call it like this searchWiki();

Also you need to remove the form tag. Because you have button type elements in it , it is by default submitting your form on enter press.

Also clear results div before appending new data like this

results.innerHTML = ""


for(let x = 0; x < 5; x++){
        console.log(title);
        const item = `<a href="${url[x]}" target="#">
                    <li>
                    <h5>${title[x]}</h5>
                    <p>${description[x]}.</p>
                </li>
                </a>`;

        results.insertAdjacentHTML("beforeend", item);
    }

Check updated codepen

edited May 23, 2018 at 9:01

answered May 23, 2018 at 8:30

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

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

4 Comments

Ryan Alexander Over a year ago

thank you for your feedback. when I put searchWiki I am still not calling the search unfortunately. also, when i add results.innerHTML = "" my search only comes back with one result.

Nandita Sharma Over a year ago

Keep results.innerHTML = "" line bfore the for loop

Ryan Alexander Over a year ago

thank you. got it just before you posted but based on your help. You are awesome.

Nandita Sharma Over a year ago

If your query was solved by my answer you can upvote it so that in future if someone faces the similar issue, he/she knows that this answer was accepted as correct answer :)

Ryan Alexander · Accepted Answer · 2018-05-23 08:47:25Z

0

when I put searchWiki I am still not calling the search unfortunately. also, when i add results.innerHTML = "" my search only comes back with one result.

answered May 23, 2018 at 8:47

Ryan Alexander

113 bronze badges

Comments

Domenik Reitzner · Accepted Answer · 2018-05-23 08:54:29Z

0

You need to add an event listener for the form submit. In that you need to cancel the event ( event.preventDefault() ).
Empty your results as @NanditaAroraSharma pointed out (best before calling build function)

answered May 23, 2018 at 8:54

Domenik Reitzner

1,6131 gold badge16 silver badges21 bronze badges

Comments

Ryan Alexander · Accepted Answer · 2018-05-23 09:26:44Z

Solved it. Removed the form as it was trying to send me to another page.

<div class="text-center">
        <input type="search" id="search-box" placeholder="Search Here">
        <div class="buttons">
            <input type="button" onclick="searchWiki()" id="search- 
button" value="Search">
            <input type="button" 
onclick="location.href='https://en.wikipedia.org/wiki/Special:Random';" 
value="Feel Lucky?">
        </div>

for building the html i took part of it out of the for loop.

const build = (data) => {
    let title = data[1];
    let description = data[2];
    let url = data[3];
    results.innerHTML = "";
for(let x = 0; x < 5; x++){
    console.log(title);

    const item = `<a href="${url[x]}" target="#">
                <li>
                <h5>${title[x]}</h5>
                <p>${description[x]}.</p>
            </li>
            </a>`;

            results.innerHTML += item;
 }

}

Collectives™ on Stack Overflow

javascript issue calling function after adding event listener

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related