Why does my website keep reloading instead of displaying the results upon pressing submit?

Question

To get to the next question in the quiz, you press the submit button and when all the questions are done it's supposed to show you the results div. However, it doesnt't and instead reloads the page. It's supposed to display the results div only after all the question have been answered so i can't change anything for the button itself.

This is the code I used. I tried adding method post and autocomplete off to the form as well as adding return to the functions but they didn't do anything. I've been stuck on this for a while and would really appreciate the help as it's for my project due soon. Thanks.

    <h1>Pick a food and I'll give you an animal</h1>

    <form id="quiz">
        <h1 id="questions">Enter your name and press next to start the quiz!</h1>
        <button id="button" class="button">Start >></button>
        
        <div id="answers">
            <input type="text" id="username">
        </div>
        <div style="clear: both"></div>

        <div id="results">
        </div>
    </form>
      <script src="script.js"></script>

var questionState = 0;
var quizActive = true;
var userStats = [
     0, // bird
     0, // bug
     0  // fish
];

var tempStats = userStats;  
var questionText = [
    "Pick a soup",      
    "Pick a pastry", 
    "Pick a fruit"
];

var answerText = [
    ["Sinigang", "Nilaga", "Tinola"],
    ["Pandesal", "Monay", "Kababayan"],
    ["Langka", "Durian", "Marang"]
];

var answerValues =  [   
    [
        [1,0,0],    
        [0,1,0], 
        [0,0,1]
    ],  
    [
        [1,0,0],    
        [0,1,0], 
        [0,0,1]
    ],  
    [
        [1,0,0],    
        [0,1,0], 
        [0,0,1]
    ]
]

var results = document.getElementById("results");
var quiz = document.getElementById("quiz");
var printResult = document.getElementById("topScore");
var buttonElement = document.getElementById("button");
    
    
    buttonElement.addEventListener("click", changeState);   
    function changeState() {                                
        updatePersonality();    
        if (quizActive) {   
            initText(questionState);    
            questionState++;        
            buttonElement.disabled = true;
            buttonElement.innerHTML = "Next >>";    
            
        } else {
            setCustomPage(); 
        }
    }

    function initText(question) {
        var answerSelection = ""; 
        for (i = 0; i < answerText[question].length; i++) {     
            answerSelection += "<label><input type='radio' name='question" +
            (question+1) + "' onClick='setAnswer("+i+")'>" + answerText[question][i] + "</label>";
        }       
        document.getElementById("questions").innerHTML = questionText[question];
        document.getElementById("answers").innerHTML = answerSelection; 
    }

    function setAnswer(input) {
        clearTempStats();   
        tempStats = answerValues[questionState-1][input];   
        if (questionState < questionText.length) {
            buttonElement.innerHTML = "Next >>";
            buttonElement.disabled = false;                 
        } else {
            quizActive = false;
            buttonElement.innerHTML = "Finish >>"
            buttonElement.disabled = false;
        }
    }
    
    function clearTempStats() {
        tempStats = [0,0,0,0,0,0];  
    }
    
    function updatePersonality() {
        for (i = 0; i < userStats.length ; i++) {
            userStats[i] += tempStats[i];
        }
    }

    function setCustomPage() {
        var highestStatPosition = 0;
        for (i = 1 ; i < userStats.length; i++) {
            if (userStats[i] > userStats[highestStatPosition]) {
                highestStatPosition = i;
            }
        }
        displayCustomPage(highestStatPosition);
        quiz.style.display = "none";        
    }
    function displayCustomPage(personality) {
        
        switch (personality) {
            
            case 0:
        quiz.style.display = "inline-block;"
        getElementById("results") = "<p>bird</p>"
                break;
                
            case 1:     
        quiz.style.display = "inline-block;"
        getElementById("results") = "<p>bug</p>"
                break;
                
            case 2:     
        quiz.style.display = "inline-block;"
        getElementById("results") = "<p>fish</p>"
                break;
            default: 
        alert("error")
                break;

        }
    }