Question

有5个textarea。从这1个问题，4个答案

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
Question <br /> <textarea id="question" rows="4" cols="70"></textarea>
<br /><br /><br /><br />
Answer <input id="answer1" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea>
<br /><br />
Answer <input id="answer2" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea>
<br /><br />
Answer <input id="answer3" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea>
<br /><br />
Answer <input id="answer4" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea>
<br /><br />
<button type="button">Save</button>
</head>
<body>
</body>
</html>

id =“问题”的问题 id =“answer *”获取答案答案可以是两个，三个或四个

对于添加了chekbox的答案，此复选框需要修复正确的答案如果复选框cheked我希望在单击类添加类“CORRECT”

中的保存按钮后

按钮“保存”

我需要脚本将textareas中的数据保存到txt文件中以这种形式：

CODE
       <div id="seconddiv" class="centered">
           <h2>Question</h2>
           <ul class="simpleList">

                   <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span>
                   <span class="simpleListText">A. Correct Answer</span></li>

                   <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
                   <span class="simpleListText">B. Incorrect Answer</span></li>

                   <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
                   <span class="simpleListText">G. Incorrect Answer</span></li>
   
                   <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
                   <span class="simpleListText">D. Incorrect Answer</span></li>   

           </ul>
       </div>

我希望我解释了我想做的事情......

最后我得到了：

包含数据的TXT文件：

   <div id="seconddiv" class="centered">
       <h2>Question 1</h2>
       <ul class="simpleList">

               <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">A. Correct Answer</span></li>

               <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">B. Incorrect Answer</span></li>

               <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">G. Incorrect Answer</span></li>

               <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">D. Incorrect Answer</span></li>   

       </ul>
   </div>

   <div id="seconddiv" class="centered">
       <h2>Question</h2>
       <ul class="simpleList">

               <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">A. Inorrect Answer</span></li>

               <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">B. Correct Answer</span></li>

       </ul>
   </div>

   <div id="seconddiv" class="centered">
       <h2>Question</h2>
       <ul class="simpleList">

               <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">B. Incorrect Answer</span></li>

               <li class="simpleListAnswer"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">G. Incorrect Answer</span></li>

               <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span>
               <span class="simpleListText">D. Correct Answer</span></li>   

       </ul>
   </div>

等......等等......

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pics">

  <div class="race_box">
    <img src="https://placehold.it/300x300?text=run%201" /><br />
    <figcaption>5k/10k Events</figcaption>

    <div class="races" id="5k">
      <h3>5k/10 Events</h3>
      <ul>
        <li>Mini Sprint<br>10/30/17<br>Memorial Park<br> Appleton
        </li>
        <li>Iron Horse<br>11/06/17<br>Bay Beach Park<br>Green Bay</li>
        <li>Twilight Trail<br>11/13/17<br>River's Edge Park<br>Wrightstown</li>
      </ul>
    </div>
    <!--  End of '5k' div-->
  </div>
  <!-- End of 'run1' div-->

  <div class="race_box">
    <img src="https://placehold.it/300x300?text=run%202" /><br />
    <figcaption>Half Marathon Events</figcaption>

    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li>Fox River Marathon 10/15/17<br>Pierce Park<br>Appleton</li>
        <li>N.E.W. Half Marathon 10/29/17<br>Bay Beach Park<br>Green Bay</li>
        <li>Winnebago Run 11/27/17<br>Menominee Park<br>Oshkosh</li>
      </ul>
    </div>
    <!-- End of 'half' div-->
  </div>
  <!-- End of 'run2' div-->

  <div class="race_box">
    <img src="https://placehold.it/300x300?text=run%203" /><br />
    <figcaption>Full Marathon Events</figcaption>

    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li>Cheesehead Marathon 9/24/17<br>Pamperin Park<br>Green Bay</li>
        <li>Chain O'Lakes Marathon 10/29/17<br>Bay Beach Park<br>Green Bay</li>
        <li>Fox Cities Marathon 11/12/17<br>Menominee Park<br>Oshkosh</li>
      </ul>
    </div>
    <!-- End of 'full' div-->
  </div>
  <!-- End of 'run3' div-->

</div>
<!-- End of 'pics' div-->

＆＃13;

$("#btn-save").click( function() {
  var text = $("#textarea").val();
  var filename = $("#input-fileName").val()
  var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
  saveAs(blob, filename+".txt");
});

＆＃13;

body { 
  padding: 1em;
  background: #EEE;
}

＆＃13;

来自Saving file with pure js

的参考

Answer 2

您无法使用javascript（在客户端）将数据保存到文件。您需要做的是创建一个保存信息的服务器，并从网页发出请求。

如何将textarea中的数据写入txt文件

2 个答案: