text blinking in textarea

Question

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 1

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

Answer 2

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>