Question

This is my JSP Page. I am taking info from user and want to generate text areas when user inputs question number.

  <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="stylesheet" href="./CSS/assignmentcss.css">
    <script src="./JS/assignment.js"></script>
    </head>
    <body>
    <jsp:include page="teacher_navbar.jsp"></jsp:include><br><br><br>
    <div class="container">
     <form  method="post" name="form2">

       <div class="row">

         <div class="col-name">
          <label for="section">Section</label>    
         </div>

          <div class="col-value">
           <input type="text" id="section">
          </div>
        </div>

        <div class="row">

         <div class="col-name">
          <label for="assignmentname">Assignment Name</label>    
         </div>

          <div class="col-value">
           <input type="text" id="assignmentname">
          </div>
        </div>

        <div class="row">

         <div class="col-name">
          <label for="questionnumber">Number Of Questions</label>    
         </div>

          <div class="col-value">
           <input type="text" id="question_number" max="10" min="1"/>
          </div>

          <div class="col-value">
          <button onclick="generate()">Generate Assignment</button>
          </div>
        </div> 

        <div id="content">


        </div>
     </form>

     </div>
     </body>
    </html>

This is my JS Page. function generate() is called on button click.

function generate(){
    var x = document.getElementById("question_number").value;
    var content = document.getElementById("content");
    var pa= new Array();
    var box = new Array();  
    while(content.hasChildNodes()){
        content.removeChild(content.lastChild);
    }

    var i=0;
    while(i<x){
        pa[i]=document.createElement("p");
        var box =document.createElement("textarea");
        box.style.minHeight="100px";
        box.style.minWidth="300px";                    
        box.style.animation="moveToPos 5s 1";
        box.style.animationFillMode="forwards";
        pa[i].appendChild(box);
        content.appendChild(pa[i]);
        i++;                   
      }          
}

Problem: when "generate" is clicked, the text area is generating dynamically but it appears only for a second and then gone.

Answer 1

I have tried your code and discovered that the problem is coming from your form tag if you remove the form tag it will work just fine.

<html>
    <head>
    </head>
    <body>
    <div class="container">

       <div class="row">

         <div class="col-name">
          <label for="section">Section</label>
         </div>

          <div class="col-value">
           <input type="text" id="section">
          </div>
        </div>

        <div class="row">

         <div class="col-name">
          <label for="assignmentname">Assignment Name</label>
         </div>

          <div class="col-value">
           <input type="text" id="assignmentname">
          </div>
        </div>

        <div class="row">

         <div class="col-name">
          <label for="questionnumber">Number Of Questions</label>
         </div>

          <div class="col-value">
           <input type="text" id="question_number" max="10" min="1"/>
          </div>

          <div class="col-value">
          <button onclick="generate()">Generate Assignment</button>
          </div>
        </div>

        <div id="content">

        </div>

        </div>


       <script>
     function generate(){
    var x = document.getElementById("question_number").value;
    var content = document.getElementById("content");
    var pa= new Array();
    var box = new Array();
    while(content.hasChildNodes()){
        content.removeChild(content.lastChild);
    }

    var i=0;
    while(i<x){
        pa[i]=document.createElement("p");
        var box =document.createElement("textarea");
        box.style.minHeight="100px";
        box.style.minWidth="300px";
        box.style.animation="moveToPos 5s 1";
        box.style.animationFillMode="forwards";
        pa[i].appendChild(box);
        content.appendChild(pa[i]);
        i++;
      }
}
       </script>

     </body>
    </html>

Text Area dynamically created and then gone within a second

1 个答案: