Wikipedia viewer event listener in the searchbox problem

1

Hi!

I have a problem and this is making me crazy.
Everything is working fine, the API call function, the function to get the searchbox value, etc.

But I can’t figure how to do the Event Listener when you press enter in the search box:
I don’t know why but when I press enter to submit the keywords, it works (it calls the function and the console.log there for debugging propuses, but it banishes instantly, like if the page reloaded.

Live page: https://alonsogd.github.io/08-FCC-project7-Wikipedia-viewer/
GitHub: https://github.com/AlonsoGD/08-FCC-project7-Wikipedia-viewer

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wikipedia Viewer</title>
    <!-- favicon -->
    <!-- <link rel="icon" type="image/png" href="https://example.com/favicon.png"> -->
    <!-- Monsterrat font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- File links -->
    <script src="js/script.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="pagelayout">
    <header>
        <img src="img\wikiLogo.png" alt="wikipedia logo" class="wikilogo responsiveimg">
        <div>
            <h1>
                <div class="wikipediatitle"><span class="supercapital">W</span>IKIPEDI<span class="supercapital">A</span></div>
                <div>VIEWER</div>
            </h1>
        </div>
    </header>
    <main>
        <form id="searchform" class="searchboxrow inputbox" autocomplete="off">
            <div><input type="search" id="searchBox" value="" placeholder=""></div>
        </form> 
        <div class="inforow">
            <i class="fa fa-info-circle" aria-hidden="true"></i><span class="tooltip"> Click <a href="https://es.wikipedia.org/wiki/Special:Random" target="_blank">this</a> to find a random Wikipedia article</span>
        </div>
        <div class="wikicontainer">
            <ul id="wikilist" class="wikiarticlesgrid">
            </ul>
        </div>
    </main>
    <footer>
        <span>This is the footer</span>
    </footer>
</body>
</html>

JS CODE

 document.addEventListener("DOMContentLoaded", function(event) {
    function wikiApiCall(searchtext) {
        var request = new XMLHttpRequest();
        var apiEndpoint = "https://en.wikipedia.org/w/api.php";
        var params = {
            action: "opensearch",
            format: "json",
            origin: "*",
            search: searchtext,
            limit: 16,
            };
    
        var esc = encodeURIComponent;
        var query = Object.keys(params)
            .map(function(k) {return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);})
            .join('&');    
    
        request.open("GET", apiEndpoint + "?" + query, true);
        request.send();
        
        request.onload = requestSuccess;
        request.onerror = requestError;
        
        function requestSuccess() {
            if (request.status >= 200 && request.status < 400) {
                var resp = JSON.parse(request.response);
                showArticles(resp);     
            } else {
                console.log("Server reached, but returned an error")
            }
        };
    
        function requestError() {
            console.log("There was a connection error");
        }
    
        function showArticles(r) {
            var wikiList = document.getElementById("wikilist");   
            for (var i = 0; i < r[1].length; i++) {
                wikilist.innerHTML += '<li class="wikiarticle"><h2><a href="' + r[3][i] + '" target="_blank">' + r[1][i]+ '</a></h2><i>' + r[2][i] + '</i></li>';
            }
        }
    };    
    function getSearchboxValue() {
        var searchBoxValue = document.getElementById("searchBox").value;
        return searchBoxValue;
    };
      
    document.getElementById("searchform").addEventListener("search", function(event){
        console.log("Test");
        wikiApiCall(getSearchboxValue());

    });
});

I have been trying to find a solution and tried multiple things, but anything worked :(.

Plan vanilla JS can sometimes be a PAIN. (I tried to do this project on propuse without libraries or frameworks)

2

Ok, I found why.
The default behaviour for the input field tagged with “search” reloads the page.

To avoid this, I had to do 2 things:
Change the event listener to “submit” from “search” and add the “event.preventDefault();” statement at the end of the function.

The second change if very straightforward but the first change I don’t understand well why was necessary…

document.getElementById("searchform").addEventListener("submit", function(event){
    console.log("Test");
    wikiApiCall(getSearchboxValue());
    event.preventDefault();
});

I am now looking jQuery with much love, all of this would have been much easier. I hope that is also easier with React or Angular when I start to learn them.