当我单击表单按钮时，为什么我的DOM更改消失了？

Question

This is my first post, so consider me a n00b.

I have created a simple form to access a value stored in a javascript array. I am trying to append an element to display the proper value. The logic works, my result will show, but only briefly, before it is overwritten. Can you help?

html

<form>
    <input type="text" label = "sitex" id="site"><br>
    <input type = "submit" value = "Submit" onclick="getFormData(document.getElementById('site').value)">
</form> 

<div id = "result"><p>Results:</p></div>

<script type="text/javascript" src="logic.js"></script>

javascript

var results = "";
function getFormData(val1) { 
    var pw = {
        "site1": "xyzabc",
        "site2": "defghi",
        "site3": "jklmno",
        "site4": "pqrstu",
        "site5": ["id1", "vwxyza"],
        "site6": ["id2", "bcdefg"],
        "site7": "hijklm",
        "site8": ["id3", "nopqrs"],
        "site8": ["id4", "tuvwxy"],
        "site9": ["id5", "zabcde"],
        "site10": "fghijk",
        "site11": ["id6", "lmnopq"],
        "site12": "rstuvw"
    };
    results = pw[val1];
    showResults(results);
}

function showResults(val2) {
    var div = document.createElement('div');
    var pss = document.createTextNode(val2);
    div.style.color = "red";
    div.appendChild(pss);
    document.getElementById("result").appendChild(div);
}

Answer 1

You're actually submitting your form when you click the Submit button and page is reloading. Just change the type of button from submit to button :

<input type="button" value="Submit" onclick="getFormData(document.getElementById('site').value)">

Answer 2

Pass your Javascript function 2 arguments, the first is the event object, the second is the value you are passing. You can then use this to prevent the default behavior of a form (which is to submit the form and refresh the page)

<form>
<input type="text" label = "sitex" id="site"><br>
<input type = "submit" value = "Submit" onclick="getFormData(event, document.getElementById('site').value)">

<div id = "result"><p>Results:</p></div>
<script type="text/javascript" src="logic.js"></script>

then in your javascript, prevent the default behavior with .preventDefault();

var results = "";
function getFormData(event, val1) {
event.preventDefault(); 
var pw = {
    "site1": "xyzabc",
    "site2": "defghi",
    "site3": "jklmno",
    "site4": "pqrstu",
    "site5": ["id1", "vwxyza"],
    "site6": ["id2", "bcdefg"],
    "site7": "hijklm",
    "site8": ["id3", "nopqrs"],
    "site8": ["id4", "tuvwxy"],
    "site9": ["id5", "zabcde"],
    "site10": "fghijk",
    "site11": ["id6", "lmnopq"],
    "site12": "rstuvw"
};
results = pw[val1];
showResults(results);
}