2017-03-12 42 views
0

我有以下网页。滚动到底该怎么回答我感兴趣的。什么是替代文本框内文字的好方法?

<!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>标记。但是,它并没有清除文本框。点击每个按钮时清空文本框的好方法是什么?

+0

您可以设置值通过document.getElementById空(“文本”)的值,以清除文本值=” ' – CaptainHere

+0

或者用jQuery:'$(“#text”)。val(“”)'。 – nnnnnn

+0

'document.getElementById('paragraph')'那里的黑客是那个元素? –

回答

0

你还是执意要在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='' 
     } 
相关问题