2017-03-12 14 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

の終わりにテキスト値をクリアしたいwouuld。値=」 ' – CaptainHere

+0

またはjQuery: '$("#text ")。val(" ")'。 – nnnnnn

+0

'document.getElementById( 'paragraph')'ハックはその要素ですか? –

答えて

0

あなたは、あなたがのdocument.getElementById(「テキスト」)と空に値を設定することができ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='' 
     } 
関連する問題