爲什麼我的html輸出消失？

Question

下面的代碼只顯示在頁面的加載時間段「測試」，然後將其disappears..please建議

<input style="margin-left:40px;" type="submit" value="submit" name="submit" onclick="myFunction()"></input> 

<script> 
function myFunction() 
{ 
document.getElementById("div6").innerHTML="Test"; 
} 
</script> 

Answer 1

一旦表單被提交，頁面將被重新加載而不會出現「測試」消息。由於您希望「測試」消息在提交表單後保留，因此我建議使用一些服務器端代碼來有條件地顯示它（如果表單已提交）。

使用PHP，它會去是這樣的：

<?php 

// determine if the form was submitted 
$submitted=isset($_POST['submitted']) ? true : false; 

?> 

<form method="post" onsubmit="myFunction();" > 
    <input type="submit" value="submit" name="submitted" /> 
</form> 

<!-- echo message if form was submitted --> 
<div id="div6"><?php echo $submitted ? "Test" : ""; ?></div> 

<script> 
function myFunction() { 
    document.getElementById("div6").innerHTML="Test"; 
} 
</script> 

或者，您可以submit the form using AJAX使頁面不會重新加載。
但這是一個不同的故事。

Answer 2

使用此：

function myFunction(event) { 
    event.preventDefault(); 
    document.getElementById("div6").innerHTML="Test"; 
} 

乾杯。

Answer 3

表單正在提交，頁面正在重新加載。這就是爲什麼你的文字是「消失」。由於按鈕是一個提交按鈕，只要函數返回true（默認），表單就會提交。您可以通過返回false來防止這種情況：

<input style="margin-left:40px;" type="submit" value="submit" name="submit" onclick="myFunction(); return false"/> 

<script> 
function myFunction() 
{ 
    document.getElementById("div6").innerHTML="Test"; 
} 
</script>