Javascript輸出錯誤

Question

我無法將文本輸出到Javascript中的div。當我在按鈕上調用該函數時，它會在短時間內顯示文本，然後消失。爲什麼這樣？代碼如下：

代碼：

function val(){ 
     var x = document.getElementById('us').value 
     document.getElementById("demo").innerHTML = x; 
} 

HTML：

<form method="post"> 
    <p id="demo"></p> 
    <br /> 
    <input type="text" id="us" name="username"></input> 
    <br />   
    <button type="submit" onclick="val()">Sign Up</button> 
</form> 

Answer 1

你在表單中提交按鈕，它的默認操作是提交這就是爲什麼結果消失（該表格頁面正在刷新）。

既然你真的不想提交表單（這裏你只是在做頁面的一些動態變化），一個簡單的解決方案是將按鈕類型更改爲button

function val() { 
 
    var x = document.getElementById('us').value 
 
    document.getElementById("demo").innerHTML = x; 
 
}

<form method="post"> 
 
    <p id="demo"></p> 
 
    <br /> 
 
    <input type="text" id="us" name="username"></input> 
 
    <br /> 
 
    <button type="button" onclick="val()">Sign Up</button> 
 
</form>

另一種解決方案是通過返回false

Answer 2

試試這個，防止提交按鈕點擊的默認操作：

您的代碼按預期工作，但由於您採取了按鈕類型爲submit，我提交了表單。

function val() { 
 
    var x = document.getElementById('us').value 
 
    document.getElementById("demo").innerHTML = x; 
 
}

<form method="post"> 
 
    <p id="demo"></p> 
 
    <br /> 
 
    <input type="text" id="us" name="username"></input> 
 
    <br /> 
 
    <button type="button" onclick="val()">Sign Up</button> 
 
</form>

Answer 3

<form method="post"> 
    <p id="demo"></p> 
    <br /> 
    <input type="text" id="us" name="username"></input> 
    <br />   
    <button type="button" id="asd">Sign Up</button> 
</form> 

$('#asd').click(function() { 
    var x = document.getElementById('us').value 
     document.getElementById("demo").innerHTML = x; 

}); 

FIDDLE

我做了一些改動。我將按鈕類型從submit更改爲button，我還添加了id for the button。檢查它