当我点击一个表单按钮时，为什么我的DOM变化消失了？

Question

这是我的第一篇文章，所以认为我是一个n00b。

我创建了一个简单的表单来访问存储在一个javascript数组中的值。我试图追加一个元素来显示正确的值。逻辑起作用，我的结果会显示出来，但只是简单地覆盖之前。你能帮我吗？

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

你实际上是在提交表单当您单击提交按钮和页面重新加载。只要改变按钮的类型从submit到button：

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

Answer 2

通过你的JavaScript函数两个参数，第一个是事件对象，第二个是要传递的价值。然后，您可以使用该功能防止窗体的默认行为（这是提交表单并刷新页面）

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

然后在你的JavaScript，防止默认行为。的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); 
}