Updating HTML elements in Javascript-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>