Updating HTML elements in Javascript

March 6, 2022

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>

>Solution :

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>