मैं एक वेब पेज विकसित कर रहा हूं जिसके माध्यम से उपयोगकर्ता प्रश्न और उत्तर जोड़ देगा। एक नया प्रश्न जोड़ने के लिए उपयोगकर्ता बटन पर क्लिक करता है और कंटेनर में नया div जोड़ा जाता है।


समस्या यह है कि जब कोई नया टेक्स्ट-एरिया जोड़ा जाता है, तो अन्य टेक्स्ट-एरिया में लिखे टेक्स्ट को हटा दिया जाता है।


बटन पर क्लिक करने से पहले भरे हुए टेक्स्ट-क्षेत्र का दृश्य

before_click


बटन पर क्लिक करने के बाद टेक्स्ट-एरिया का दृश्य

after_click


कोड:

<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>
1
Zakir Aghayev 5 जून 2018, 11:48

3 जवाब

सबसे बढ़िया उत्तर

जैसा कि आपको इनलाइन JS और CSS का उपयोग करने से बचना चाहिए, मैं आपको निम्नलिखित का प्रस्ताव देता हूं:

  • अपने HTML में एक छिपा हुआ div id="template" बनाएं,
  • जब आप "जोड़ें" बटन पर क्लिक करते हैं, तो अपने कंटेनर के बाद इसकी सामग्री को जोड़ने के लिए JS का उपयोग करें।
  • मैंने आपके id="question" को भी class="question" में बदल दिया है क्योंकि आप एक से अधिक जोड़ सकते हैं।
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>

आशा है कि इससे सहायता मिलेगी।

0
Takit Isy 5 जून 2018, 12:42

Jquery एपेंड() का प्रयोग करें: डी

<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>
0
Akhil Aravind 5 जून 2018, 11:55

innerHTML संपूर्ण सामग्री का पुनर्निर्माण करें। निम्नलिखित का प्रयास करें:

<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>

आंतरिक HTML पर अधिक जानकारी के लिए, यहां क्लिक करें

3
Nebulosar 5 जून 2018, 11:54