Wikipedia viewer event listener in the searchbox problem


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:


<!DOCTYPE html>
<html lang="en">
    <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=""> -->
    <!-- Monsterrat font -->
    <link href="" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="">
    <!-- File links -->
    <script src="js/script.js"></script>
    <link rel="stylesheet" href="css/style.css">
<body class="pagelayout">
        <img src="img\wikiLogo.png" alt="wikipedia logo" class="wikilogo responsiveimg">
                <div class="wikipediatitle"><span class="supercapital">W</span>IKIPEDI<span class="supercapital">A</span></div>
        <form id="searchform" class="searchboxrow inputbox" autocomplete="off">
            <div><input type="search" id="searchBox" value="" placeholder=""></div>
        <div class="inforow">
            <i class="fa fa-info-circle" aria-hidden="true"></i><span class="tooltip"> Click <a href="" target="_blank">this</a> to find a random Wikipedia article</span>
        <div class="wikicontainer">
            <ul id="wikilist" class="wikiarticlesgrid">
        <span>This is the footer</span>


 document.addEventListener("DOMContentLoaded", function(event) {
    function wikiApiCall(searchtext) {
        var request = new XMLHttpRequest();
        var apiEndpoint = "";
        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]);})
   "GET", apiEndpoint + "?" + query, true);
        request.onload = requestSuccess;
        request.onerror = requestError;
        function requestSuccess() {
            if (request.status >= 200 && request.status < 400) {
                var resp = JSON.parse(request.response);
            } 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){


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)

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){

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.