動態創建文本區域，然后在一秒鍾內消失

Question

這是我的JSP頁面。 我正在從用戶那里獲取信息，並希望在用戶輸入問題編號時生成文本區域。

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

這是我的JS頁面。 單擊按鈕時調用函數generate（）。

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++;                   
      }          
}

問題：單擊“生成”時，文本區域正在動態生成，但僅顯示一秒鍾，然后消失。

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>

動態創建文本區域，然后在一秒鍾內消失

問題描述

1 個解決方案

解決方案1
0 已采納 2018-02-03 10:55:29

動態創建文本區域，然后在一秒鍾內消失

問題描述

1 個解決方案

解決方案1 0 已采納 2018-02-03 10:55:29

解決方案1
0 已采納 2018-02-03 10:55:29