text blinking in textarea

I have the following code :

i = 0;
function add_task(){
    return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"n");
}
    

#pos{
        position: absolute;
        bottom: 25px;
        text-align:center;
        }
    
    form{
        padding-left:70px;}
        
    h1{padding:50px; color:blue}
    
    #body {border:5px solid black;}

        <form name="form1">
        <label for="addtask">Add task : </label>
        <input type="text" id="addtask"/>
        <button id="ad" onclick="add_task()">Add task</button><br><br>
        <label style="vertical-align:top;">Task list :</label>
        <textarea id="tasklist" rows=10>
        </textarea>
        <div id="pos">
            <label for="nexttask">Next task : </label>
            <input type="text" id="nexttask"/>
            <button id="nt" onclick="next_task">Show Next task</button><br>
    
    </div>
    </form>

I need to copy the text entered in textbox and paste in the textarea. But the text is displayed and erased immediately like blinking. I want that to be displayed permanently.

Please guide me!

Answer

<button>s, by default are type="submit", so clicking is submitting your form. Add type="button" to your button.