Adding Dynamically Input Text with JS

November 23, 2022

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Add Multiple Choice Question</title>
        <link rel="stylesheet" href="./multiple.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
        <script src="./multiple.js"></script>
    </head>
    <body>
        <script src="./multiple.js"></script>
        <div class="multiple">
            
            <div class="question">
                <label id="question-label" for="question">Question</label>
                <textarea name="question-area" id="qarea" cols="38" rows="5"></textarea>
            </div>
            <div class="answer">
                <label class="answer-label" for="answer">Choice-1 </label>
                <input class="answer-inp" type="text">
                <i class="fa-solid fa-circle-plus fa-xl" id="icon-add" onclick="add_more_field()"></i>
            </div>
            
           <!-- <div class="icon"></div>-->
    
    
        </div>
        
    </body>
    </html>

function add_more_field(){
        
       html = '<div class="answer">\
       <label class="answer-label" for="answer">Choice-1 </label>\
       <input class="answer-inp" type="text">\
       <i class="fa-solid fa-circle-plus fa-xl" id="icon-add" onclick="add_more_field()"></i>\
    </div>'
    
    var add = document.getElementsByClassName("multiple");
    add.appendChild(html);
    }

I want to write a javascript code that creates the same answer div when the user presses the + icon again. This will be the answers to a multiple choice question and the number of answers needs to be increased dynamically. I wrote the function, but it does not create a new answer div when I click on the icon. How can I do that?

>Solution :

here you can try this logic :

 let html =
        '<div class="answer">\
         <label class="answer-label" for="answer">Choice-1 </label>\
         <input class="answer-inp" type="text">\
         <i class="fa-solid fa-circle-plus fa-xl" id="icon-add" onclick="add_more_field()"></i>\
      </div>';

      function add_more_field() {
        var add = document.querySelector(".multiple");
        add.innerHTML += html;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add Multiple Choice Question</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
  </head>
  <body>
    <div class="multiple">
      <div class="question">
        <label id="question-label" for="question">Question</label>
        <textarea name="question-area" id="qarea" cols="38" rows="5"></textarea>
      </div>
      <div class="answer">
        <label class="answer-label" for="answer">Choice-1 </label>
        <input class="answer-inp" type="text" />
        <i
          class="fa-solid fa-circle-plus fa-xl"
          id="icon-add"
          onclick="add_more_field()"
        ></i>
      </div>

      <!-- <div class="icon"></div>-->
    </div>

  </body>
</html>