Javascript Array elements not writing to innerHTML

Question

I have a Javascript function that reads entries from an HTML form into an array. However, when I try to read the array into a display element back on the HTML page, it shows up blank. I debugged and know the elements are getting into the array fine, but they aren't displaying when I use innerhtml on my desired output elements. Any help? Below is my JS code (the changepage function isn't complete)

var attributes = new Array("Name", "Nickname", "Email", "Favorite Movie", "Favorite Book", "Favorite Music", "Paragraph", "Image", "Page Background", "Text Color", 0)

function populateAttributes(){
    var userInput = document.getElementById("myForm");
    var i;
    for (i = 0; i < userInput.length; i++){
        if (userInput.elements[i].value == null){
            document.write("All fields must be entered. Please try again.");
            break;
        } else {
        attributes[i] = userInput.elements[i].value;
        }
    }
    changePage();
}

function changePage(){
    document.getElementById("nameOutput").innerHTML = attributes[0];
    document.getElementById("avatar").src = attributes[7];
    document.body.style.backgroundColor = attributes[8];
    document.body.style.color = attributes[9];
    document.body.style.fontSize = attributes[10];
}

And here is the HTML code

<form id="myForm" action="#" method="post" onsubmit="return populateAttributes()">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="nickname">Nickname:</label><br>
    <input type="text" id="nickname" name="nickname"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <label for="movie">Favorite Movie:</label><br>
    <input type="text" id="movie" name="movie"><br>
    <label for="book">Favorite Book:</label><br>
    <input type="text" id="book" name="book"><br>
    <label for="music">Favorite Type Of Music:</label><br>
    <input type="text" id="music" name="music"><br>
    <label for="name">About You:</label><br>
    <textarea id="about" name="about" rows="4" cols="50"></textarea><br>
    <label for="avatar">Link To Avatar Image:</label><br>
    <input type="text" id="avatar" name="avatar"><br><br>
    <label for="background">Select a background color:</label><br>
    <select id="background" name="background">
        <option value="white">White</option>
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
    </select><br>
    <label for="txtcolor">Select a text color:</label><br>
    <select id="txtcolor" name="txtcolor">
        <option value="white">White</option>
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
    </select><br>
    <label for="txtsize">Enter text size (in pixels):</label><br>
    <input type="text" id="txtsize" name="txtsize"><br><br>
    <input type="submit">               
</form> 
 
<p>Name: <span id="nameOutput" class="result"></span></p>

Edit: I may have found the issue. After debugging, it shows that the values are in fact reading into the array. However, as soon as the function ends, it reverts back to a normal page. I'm not sure how to keep the values after the page reloads

You have to stop the form from submitting, which in this case reloads the page. You already have `onsubmit="return ...` but `populateAttributes()` doesn't return anything that would stop the form from submitting. Add `return false;` — Andreas, Nov 11 '20 at 14:26
Possible dupe targets: [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted), [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Andreas, Nov 11 '20 at 14:29

Javascript Array elements not writing to innerHTML

0 Answers0