I am new to JS , and i was creating a form where i would click the save button and the entered text would shown in the page , but when i click the save button the change is shown for a sec and disappears.
Source Code :
function save(){
save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html> <html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="#">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
Try <form action="#">, by using this your page will not be reloaded. Default behaviour of <form action=""> is submitting, so it will reload the page.
The default behaviour of the <form> is to submit the form data to server. You need to prevent this default behaviour by using preventDefault.
function save(event) {
event.preventDefault(); // Skip default behaviour
const save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id="input_element">
<br>
<button id="ds" onclick="save(event)">SAVE</button>
<h1 id="saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>Ok the change disappears because the page is reloading to something blank
<form action="">
change to a hash like
<form action="#">
Give your Form an ID .then on you click event prevent default .... like this
let form = document.getElementById("MyForm");
//Custom Event ...
form.addEventListener('submit', (e) => {
// on form submission, prevent default
e.preventDefault();
//your other Code to change the text
});
This will prevent the form from making your page reload