2017-03-12 70 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='' 
     } 
相關問題