Question

我有以下网页。滚动到底部以回答我感兴趣的内容。

<!DOCTYPE.html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script> 
     $(document).ready(function(){ 
       $("#start").click(function(){
         $("body").replaceWith("<div id='paragraph'><p style='text-align: center; font-family: Arial; font-size: 16pt;'>What is your <span id='replace'>name</span>?</p>" + "<div style='font-family: Arial; text-align: center;'><input type='text' name='text' id='text'><br><br><input type='button' name='button' value='Submit' onclick='doStuff()'></div>");
         });
     });
    </script>
    <style>
      body {

        font-family: Arial;

      }
     </style>
     <script>

       var list = ["age", "email address", "phone number", "credit card number", "social security number"];
       var arr = [];
       var i = 0;

       function doStuff() {

         var answer = document.getElementById('text').value;

         if (answer == '') {

           alert("You must put in a valid answer.");
           return;

         }

         arr.push(answer + " ");
         document.getElementById('replace').innerHTML = list[i];
         i += 1;


         if (i == 6) {

           document.getElementById('paragraph').innerHTML = "<div id='info'><br><br><p style='font-family: Arial; text-align: center;'>Your name is " + arr[0] + "," + " your age is " + arr[1] + "," + " your email address is " + arr[2] + "," + " your phone number is " + arr[3] + "," + " your credit card number is " + arr[4] + "," + " and your social security number is " + arr[5] + "." + "<br><br><input type='button' name='OK' value='OK' onclick='masterTroll()'></p></div>";

         }

       }

       function masterTroll() {


         document.getElementById('info').innerHTML = "<br><br><div style='text-align: center; font-family: Arial'><p>Now the internet has all of your personal information.<br>Have a nice day! >:D</p></div>"

      }
     </script>
  </head>
  <body>
    <p>Click the button below to begin.</p>
    <button id="start">Click Me</button>
  </body>
</html>

上面的jQuery函数生成一个<p>标签，其中包含一些单词，一个文本框和一个按钮。每次单击该按钮时，函数doStuff()都会记录文本框中的信息并更改<p>标记。但是，它不会清除文本框。在每次点击按钮时清空文本框的好方法是什么？

Answer 1

将<UserControl Name="MainRegion" prism:RegionManager.RegionName="MainRegion"/>添加到$('#text').val('')的末尾。

https://jsfiddle.net/persianturtle/4zk86c4q/

Answer 2

您想要在doStuff方法结束时清除文本值

function doStuff() {
         var answer = document.getElementById('text').value;
         if (answer == '') {
           alert("You must put in a valid answer.");
           return;
         }
         arr.push(answer + " ");
         document.getElementById('replace').innerHTML = list[i];
         i += 1;
         if (i == 6) {

           document.getElementById('paragraph').innerHTML = "<div id='info'><br><br><p style='font-family: Arial; text-align: center;'>Your name is " + arr[0] + "," + " your age is " + arr[1] + "," + " your email address is " + arr[2] + "," + " your phone number is " + arr[3] + "," + " your credit card number is " + arr[4] + "," + " and your social security number is " + arr[5] + "." + "<br><br><input type='button' name='OK' value='OK' onclick='masterTroll()'></p></div>";

         }
document.getElementById('text').value=''
       }

替换文本框中的单词有什么好方法？

2 个答案: