Well-Known Member Well-Known Member - 9 months ago 20
HTML Question

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("<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()'>");
});
});
</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?

Answer Source

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