문서에 새 요소를 추가했지만 양식 자체가 새로 고침 중임

그래서 추가 단추를 클릭 할 때 사용자가 새 단락을 추가 할 수있게하려고합니다. 단추를 클릭하면 작동하는 것을 볼 수 있지만 그 후에 페이지가 새로 고쳐지면 아마도 새로운 단락이 사라집니다. 그 JS 코드의 여기문서에 새 요소를 추가했지만 양식 자체가 새로 고침 중임

<!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>

그리고 :

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();'를 사용 해본 적이 있습니까? Example 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

답변을 편집했습니다. –

당신은 실제로 적어도 두 가지 옵션이 있습니다 : Bulent Vural 이미 언급 한 바와 같이

제거 유형 = "제출"을
또는 반환 귀하의 onClick 처리기에서 false가 발생했습니다

출처

2017-02-12 15:02:25

문서에 새 요소를 추가했지만 양식 자체가 새로 고침 중임

답변

관련 문제