JavaScriptを使用してフォームからデータを追加しています

Question

いいえ、今のところphpを使いたくありません。 heres my task ... IDはFORMからデータを取得し、eventHandlerを使用して新しい要素を作成するためにそのデータを使用します。また、私はイベントハンドラを使用する部分を保持したいと思います。問題は、追加されたデータがdページに長く滞在しないということです。あなたは間違って何をしていたのpls HALP

document.getElementById("fom").addEventListener("submit", performTask); 
 

 
function performTask() { 
 
    var input = document.getElementById('input'); 
 
    input = input.value; 
 
    // console.log(input); 
 
    // alert(input); 
 

 
    var newList = document.createElement('li'); 
 
    newList.appendChild(input); 
 
    var element = document.getElementById('orList'); 
 
    var child = document.getElementById('last'); 
 
    element.insertAfter(newList, child); 
 

 
    //e.preventDefault(); \t 
 
}

<form id="fom"> <br> 
 
    <input type="text" placeholder="Enter list name" id="input" autofocus required> 
 
    <br><br> 
 
    <input type="submit" value="Append"> 
 
</form> 
 

 
<ol id="orList"> 
 
    <li>List</li> 
 
    <li>Another list</li> 
 
    <li id="last">Some list</li> 
 
</ol>

Answer 1

まず、：

1. 機能performTaskがeventパラメータ
2. evt.preventDefault()を受信する必要があることが解約された場合、イベントをキャンセル イベントのさらなる伝播を停止することなく
3. insertAfterが、私はinsertAdjacentHTML javascriptの 機能を使って、コードを単純化
4. javascriptのではないjQueryの関数である（あなたのケースでイベントを提出 ）。このリンクの詳しい情報： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
5. newList.appendChild(input);この行は間違っています。文字列を追加できないためです。

はここであなたの質問への答えは：

document.getElementById("fom").addEventListener("submit", performTask); 
 

 
function performTask(evt) { 
 
    evt.preventDefault(); \t 
 
    var input = document.getElementById('input'); 
 
    input = input.value; 
 

 
    var d1 = document.getElementById('last'); 
 
    d1.insertAdjacentHTML('beforeend', '<li>'+input+'</li>'); 
 
\t document.getElementById('input').value = ''; 
 
}

<form id="fom" method="post"> <br> 
 
    <input type="text" placeholder="Enter list name" id="input" autofocus required> 
 
    <br><br> 
 
    <input type="submit" value="Append"> 
 
</form> 
 

 
<ol id="orList"> 
 
    <li>List</li> 
 
    <li>Another list</li> 
 
    <li id="last">Some list</li> 
 
</ol>