How to Manipulate the Text element in Html by A Variable whose value is given by the user?

I am trying to Manipulate the Text with id ‘varname’ (Spartans) with the value inputted in the form saved as a variable ‘input’

<div class="middle">
    <h2 class="greet" id="demo">Welcome Back,&nbsp; <span id="varname">Spartan</span></h2>
     <div class="form">
    <form>
        <label for="Name">Enter Your Name</label>
        <input type="text" id="Name">
        <input type="submit" value="Submit" onclick="myFunction()">
    </form>
    </div>
    <script>
        function myFunction(){
            var input= document.getElementById("Name").value;
            document.getElementById("varname").innerHTML = input;
        }
    </script>

>Solution :

Use <input type="button"> instead of <input type="submit">

https://jsfiddle.net/yt0kgnqe/