0
Je souhaite donc que l'utilisateur puisse ajouter un nouveau paragraphe lorsqu'il clique sur le bouton Ajouter. Je peux voir que ça fonctionne quand je clique sur le bouton mais après ça la page se rafraîchit, et alors le paragraphe supposé nouveau disparaît.Ajout de nouveaux éléments à un document mais le formulaire se rafraîchit automatiquement
Voici le code HTML:
<!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>
Et voici son code 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);
};
Comment puis-je ajouter le nouvel élément après avoir cliqué sur le bouton? Merci.
Avez-vous essayé d'utiliser 'event.preventDefault();'? Exemple https://jsfiddle.net/71k16o2o/ J'ai également changé votre '' '
' et supprimé la fermeture automatique sur votre 'bouton' – NewToJS
Ou vous pouvez utiliser l'attribut' onsubmit' sur votre étiquette de formulaire. 'onsubmit =" return false; "' Exemple: https://jsfiddle.net/2Lss3fen/ – NewToJS