What is a good way to replace words inside a text box?

I have the following webpage. Scroll to the bottom to answer what I'm interested in.

<!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>

The jQuery function above produces a <p> tag with some words, a textbox, and a button. Every time you click the button, function doStuff() records the information from the textbox and changes the <p> tag. However, it does not clear the textbox. What's a good way to empty the textbox on every button click?

Answers 1

  • You wouuld want to clear out the text value at the end of doStuff method

    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=''
           }
    

Related Articles