'Updating HTML elements in Javascript

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


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

The button has the default type submit and is trying to submit the form.

So if you define the button as button. It works.

<button type="button" id="ds" onclick="save()">SAVE</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 William Luisan
Solution 2 JonoJames
Solution 3 monkey-0001

Related Questions