title: After form is submitted, function runs quickly and chart shows up for a millisecond and then goes away
body: <p>I have a JavaScript code that I have been trying for a while, where I am trying to get an input text/num with spaces in between and shows a graph of how many &quot;students&quot; received different grades letters. Everything is working great until the last part of the index.js code. When the user writes the scores numbers and clicks the submit button, the graph just shows for a millisecond the information and styles but then it seems like it re-loads again to the beginning. Please help me with the last function.</p>
  <p><strong>index.html</strong></p>
  <pre><code> &lt;body&gt;
    &lt;h1&gt;Grade Distribution&lt;/h1&gt;
    &lt;div class=&quot;center&quot;&gt;
       &lt;table id=&quot;distributionTable&quot;&gt;
          &lt;tr id=&quot;firstRow&quot;&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;A&lt;/td&gt;
             &lt;td&gt;B&lt;/td&gt;
             &lt;td&gt;C&lt;/td&gt;
             &lt;td&gt;D&lt;/td&gt;
             &lt;td&gt;F&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id=&quot;thirdRow&quot;&gt;
          &lt;/tr&gt;
       &lt;/table&gt;
    &lt;/div&gt;
    &lt;section class=&quot;center2&quot;&gt;
          &lt;form id=&quot;  &quot;&gt;
             &lt;div class=&quot;container&quot;&gt;
                &lt;label class=&quot;label-title&quot; for=&quot;scores-input&quot;&gt;Enter the scores for each studente with space in between: &lt;/label&gt;
                &lt;input type=&quot;text&quot; id=&quot;scores-input&quot;&gt;
                &lt;button onclick=&quot;fn1()&quot; id=&quot;btn1&quot;&gt;Submit&lt;/button&gt;
             &lt;/div&gt;
          &lt;/form&gt;     
    &lt;/section&gt;
  </code></pre>
     
  <p><strong>index.js</strong></p>
  <pre><code>function parseScores(scoresString) {
     return scoresString.split(&quot; &quot;);  //Return parsing 
  }  
  
  function buildDistributionArray(scoresArray) {
     var result = [0, 0, 0, 0, 0]; //A, B, C, D, F quantities of people who get those grades
     for(let i = 0; i &lt; scoresArray.length; i++){
        var sco = parseInt(scoresArray[i]);
  
        if(sco &gt;= 90){
           result[0] += 1;   //sum 1 person to the A place [0] == 1 position
        }
        else if(sco &gt;= 80){
           result[1] += 1;   //sum 1 person to the B place [1] == 2 position
        }
        else if(sco &gt;= 70){
           result[2] += 1;   //sum 1 person to the C place [2] == 3 position
        }
        else if(sco &gt;= 60){
           result[3] += 1;   //sum 1 person to the D place [3] == 4 position
        }
        else
           result[4] += 1;   //sum 1 person to the F place [4] == 5 position
     }
     return result;
  }
  
  function setTableContent(userInput) {
     var scores = parseScores(userInput); //parse scores from the user input 
     var arrayGrade = buildDistributionArray(scores); //creating the array of the quantity of people who get the letter grade
     var getTable = document.getElementById('distributionTable');   //creating a variable table using the distributionTable id 
     var flag = 0;  //flag in false
     var i = 0; 
  
     while(i &lt; arrayGrade.length){
        if(arrayGrade[i] != 0){ //if the distincts locations of the array is not 0 
           flag = 1;   //flag becomes true
        }
        i++;
     }
  
     if(flag == 1){ //if the flag is true
        //create the table rows with the styles 
     getTable.innerHTML =`
        &lt;tr id=&quot;firstRow&quot;&gt;
           &lt;td&gt;&lt;div style=&quot;height:30px&quot; class=&quot;bar0&quot;&gt;&lt;/div&gt;&lt;/td&gt;
           &lt;td&gt;&lt;div style=&quot;height:20px&quot; class=&quot;bar1&quot;&gt;&lt;/div&gt;&lt;/td&gt;
           &lt;td&gt;&lt;div style=&quot;height:10px&quot; class=&quot;bar2&quot;&gt;&lt;/div&gt;&lt;/td&gt;
           &lt;td&gt;&lt;div style=&quot;height:0px&quot;  class=&quot;bar3&quot;&gt;&lt;/div&gt;&lt;/td&gt;
           &lt;td&gt;&lt;div style=&quot;height:20px&quot; class=&quot;bar4&quot;&gt;&lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt; 
        &lt;tr&gt;
           &lt;td&gt;A&lt;/td&gt;
           &lt;td&gt;B&lt;/td&gt;
           &lt;td&gt;C&lt;/td&gt;
           &lt;td&gt;D&lt;/td&gt;
           &lt;td&gt;F&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td class=&quot;grade&quot;&gt;&lt;/td&gt;
           &lt;td class=&quot;grade&quot;&gt;&lt;/td&gt;
           &lt;td class=&quot;grade&quot;&gt;&lt;/td&gt;
           &lt;td class=&quot;grade&quot;&gt;&lt;/td&gt;
           &lt;td class=&quot;grade&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;`;
  
     var j = 0;
        while(j &lt; arrayGrade.length){
           var barNames = document.getElementsByClassName(&quot;bar&quot;+j); //bar0, bar1, bar2, bar3, bar4
           document.getElementsByClassName(&quot;grade&quot;)[j].innerHTML = arrayGrade[j]; //grade0, grade1, grade2, grade3, grade4 
           barNames[0].style.height = (arrayGrade[j] * 10)+&quot;px&quot;; //3 * 10 == 30, 1 * 10 = 10; to create the graph height px
           j++; //next number from 0 - 4 
        }  
     }
     else{ //else no table to display
        getTable.innerHTML = &quot;&lt;tr&gt;&lt;td&gt;No graph to display&lt;/td&gt;&lt;/tr&gt;&quot;; //Printing No Graph To Display
     }
  }
  
  // The argument can be changed for testing purposes
  // setTableContent(&quot;45 78 98 83 86 99 90 59 100 200 50 30 20 25 60 65 500 1000&quot;);   
  </code></pre>
  <blockquote>
  <p>Help here</p>
  </blockquote>
  <pre><code>function bodyLoaded(input){
     setTableContent(input);
  }
  
  function fn1(){
     const str = document.getElementById('scores-input').value;
     // alert(&quot;Value inside the text box is: &quot;+str);
     bodyLoaded(str);
  }
  </code></pre>