Javascriptを使用してフォームからユーザー入力を表示する

Question

ユーザーが入力したフォームを取得し、その出力を表示する必要があります。これは意図した作品として

<form name="testForm"> 
 

 
<input type="text" name="username" id="username"> 
 
<br> 
 
<input type="text" name="password" id="password"> 
 
<br> 
 
<input type="submit" value="Submit" onClick="myFunc()"> 
 

 
</form> 
 

 
<div id="demo"></div> 
 

 
<script> 
 
\t function myFunc(){ 
 
\t var x = document.getElementById('username').value; 
 
\t 
 
\t document.write(x); 
 
\t } 
 
\t 
 
\t 
 
</script>

：

は、だから私はこれを試してみました。さて、IDのデモでdivに表示することで、表示方法を変更したいだけです。

だから、これは私が試したものです：

<form name="testForm"> 
 

 
<input type="text" name="username" id="username"> 
 
<br> 
 
<input type="text" name="password" id="password"> 
 
<br> 
 
<input type="submit" value="Submit" onClick="myFunc()"> 
 

 
</form> 
 

 
<div id="demo"></div> 
 

 
<script> 
 
\t function myFunc(){ 
 
\t var x = document.getElementById('username').value; 
 
\t 
 
\t document.getElementById('demo').innerHTML =x; 
 
\t } 
 
\t 
 
\t 
 
</script>

あなたが見ることができるように今、これは動作しません。実際に結果を表示し、空の画面を再読み込みします。なぜこれが起こっているのか分かりません。

私のコードから、xをユーザ名に割り当てたことがわかります。だから私がやっているのは、document.write（これはうまくいった）を使う代わりに、divに表示したいだけです。ただし、空の画面を表示して読み込みます。

誰かが私に間違っていることを教えてもらえますか？ユーザー名フィールドに入力した内容のdivデモを表示するにはどうすればよいですか？構文エラーですか？

ps：私は自己学習と練習をしています。だから、私はちょうどユーザー名で遊んだりしようとしました。私がそれをしたら、私は同じコードをパスワードに適用します。

Answer 1

あなたが提出から送信ボタンを停止するpreventDefault()を使用することができます。

<form name="testForm"> 
 

 
<input type="text" name="username" id="username"> 
 
<br> 
 
<input type="text" name="password" id="password"> 
 
<br> 
 
<input type="submit" value="Submit" onClick="myFunc(event)"> 
 

 
</form> 
 

 
<div id="demo"></div> 
 

 
<script> 
 
\t function myFunc(event){ 
 
     event.preventDefault(); 
 
\t var x = document.getElementById('username').value; 
 
\t 
 
\t document.getElementById('demo').innerHTML =x; 
 
\t } 
 
\t 
 
\t 
 
</script>

Answer 2

フォーム提出を防止する必要があります。

に変更myFunc：

function myFunc (evt) { 
    evt.preventDefault(); 

    // everything else 
}