は、ドキュメントに新しい要素を追加するが、フォームはただ

だから、私は、ユーザーが彼/彼女は、[追加]ボタンをクリックしたときに新しい段落を追加できるようにしたい自分自身をリフレッシュされます。ボタンをクリックしたときに動作していることがわかりますが、その後ページが更新され、おそらく新しい段落が消えてしまいます。は、ドキュメントに新しい要素を追加するが、フォームはただ

<!DOCTYPE html> 
<html> 
<head> 
<title>Item Lister</title> 
<link rel="stylesheet" type="text/css" href="default.css"\> 

</head> 
<body> 

<h1>ITEM LIST</h1> 

<div id="container"> 
<ol> 

</ol> 
</div> 

</br> 
<form> 
    <input id="txtbox" type="text" name="txt"/> 
</br> 
    <button id="add_btn" type="submit" name="add"/>Add</button> 
</form> 
<script src="myScript.js"></script> 
</body> 
</html>

そして、ここではそのJSコードがあります：私はボタンをクリックした後に新しい要素を追加するにはどうすればよい

add_btn.onclick = function(){ 
    var msg; 
    msg = document.getElementById("txtbox").value; 
    var newListElement = document.createElement("li"); 

    var liText = document.createTextNode(msg); 

    newListElement.appendChild(liText); 
    document.getElementById("container").getElementsByTagName('ol')[0].appendChild(newListElement); 


};

ここではHTMLコードがですか？おかげさまで

出典

2017-02-12 Antonio Mercado

'event.preventDefault（）;'を使ってみましたか？例https://jsfiddle.net/71k16o2o/また、あなたの '
'を '
'に変更し、あなたの 'button'で自己終了を取り除いた – NewToJS

また、フォームタグで' onsubmit'属性を使うこともできます。 'onsubmit =" return false; "'例：https://jsfiddle.net/2Lss3fen/ – NewToJS

type="submit"

編集を削除します。ただ提出する属性を削除することは十分ではないことが判明。 type="button"：

のように変更する必要があり

<button id="add_btn" type="button" name="add"/>Add</button>

出典

2017-02-12 14:59:01

'type =" submit "を削除するだけで動作するようには見えません。 https://jsfiddle.net/43ktkm94/ – NewToJS

答えを編集しました。 –

あなたが実際には、少なくとも2つのオプションがあります。ビュレントVuralは、すでに述べたように

削除タイプは= "提出" を
またはRETURNあなたのonClickハンドラからfalseが返されました

出典

2017-02-12 15:02:25

は、ドキュメントに新しい要素を追加するが、フォームはただ

答えて

関連する問題