text blinking in textarea-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

Here's a working version. I think your issue was that buttons within a form will default to type submit if no type is specified.

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

function formSubmitted(e) {
  // Handle form submit, if needed
  return false;
}

function next_task() {
  // Not yet implemented
}

#pos{
  position: absolute;
  bottom: 25px;
  text-align:center;
}
    
form{
  padding: 1rem;
}

h1{
  padding: 1rem;
  margin: 0;
  color: blue;
}

#body {
  border: 5px solid black;
}

<header>
  <h1>To Do list</h1>
</header>

<form name="form1" onsubmit="return formSubmitted(event)">
  <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>