當我點擊一個表單按鈕時，爲什麼我的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); 
}