Adding HTML from JavaScript removes written texts from input

Question

I'm developing a web page by means of which user will add questions and answers. To add a new question the user clicks on the button and new div is added to container.

The problem is that when a new text-area is added, the text written in the other text-areas is removed.

View of filled text-area before clicking the button

before_click

View of text-area after clicking the button

after_click

Code:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript">
    const template = '<form class="eachtest">' +
      '<textarea id="question" rows="4" cols="80" placeholder="Sual"></textarea>' +
      '<br><strong> A </strong> ' +
      '<textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br>' +
      '</form>';

    function on_click() {
      document.querySelector('.container').innerHTML += template;
    }
  </script>
</head>

<body>
  <div class="container"></div>
  <button id="add" type="button" name="button" onclick="on_click()">add</button>
</body>

</html>

Nebulosar · Accepted Answer · 2018-06-05 08:54:47Z

3

innerHTML rebuild the whole content. Try the following:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript">
    const template = '<form class="eachtest"><textarea id="question" rows="4" cols="80" placeholder="Sual"></textarea><br><strong> A </strong>  <textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br></form>';

    function on_click() {
      document.querySelector('.container').insertAdjacentHTML('beforeend', template);
    }
  </script>
</head>

<body>
  <div class="container">

  </div>
  <button id="add" type="button" name="button" onclick="on_click()">add</button>


</body>

</html>

For more info on innerHTML, click here

answered Jun 5, 2018 at 8:54

Nebulosar

1,8873 gold badges23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Takit Isy · Accepted Answer · 2018-06-05 09:42:48Z

As you should avoid using inline JS and CSS, I propose you the following:

Create a hidden div id="template" in your HTML,
Use JS to append its content after your container when you click the "add" button.
I also changed your id="question" to class="question" as you can add multiple ones.

const template = document.querySelector('#template').innerHTML;
var container = document.querySelector('.container');
document.querySelector('#add').onclick = function() {
  container.insertAdjacentHTML('beforeend', template);
}

#template {
  display: none;
}

<html lang="en" dir="ltr">

<body>
  <div class="container"></div>
  <button id="add" type="button" name="button">Add</button>
  <div id="template">
    <form class="eachtest"><textarea class="question" rows="4" cols="80" placeholder="Sual"></textarea><br> <strong> A </strong><textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br></form>
  </div>
</body>

</html>

Hope it helps.

Akhil Aravind · Accepted Answer · 2018-06-05 08:55:04Z

0

Use Jquery append() :D

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      const template = '<form class="eachtest"><textarea id="question" rows="4" cols="80" placeholder="Sual"></textarea><br><strong> A </strong>  <textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br></form>';
      function on_click() {
        $('.container').append(template)

    }

    </script>
  </head>

  <body>
    <div class="container">

    </div>
<button id="add" type="button" name="button" onclick="on_click()">add</button>


  </body>
</html>

answered Jun 5, 2018 at 8:55

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

1 Comment

Nebulosar Over a year ago

This isn't a jQuery qeustion. Don't use it in your answer then :) Again, its a easy way of doing it, but you should check youmightnotneedjquery.com

Collectives™ on Stack Overflow

Adding HTML from JavaScript removes written texts from input

View of filled text-area before clicking the button

View of text-area after clicking the button

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

View of filled text-area before clicking the button

View of text-area after clicking the button

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related