JavaScript Forum

**Alidad@comcast.** · 03-27-2007, 01:27 PM

Hi, please copy this code and run on your editor and see sample, as you can see this sample and I'm trying to make change code to add text field for the first name and then show the Decrypting Text Effect, I have tried that and I could not figure out how that can be done.

I need your help to see if you be able to make change code by add text text field for the first name when person enter first name and click button to show Decrypting Text Effect of first name.

<html>
<head>
<title>Decrypting Text Effect</title>
<style>
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}

td {color:black;font-family:verdana;font size:8pt}
p {color:black;font-family:verdana;font size:8pt;text-decoration: none}
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}
</style>

<script>
var got;
var chars;
function change()
{
var randstring = "";
var rslength = chars.length - got.length;

var decrypted = document.getElementById("decoded");
var encrypted = document.getElementById("encoded");

for(var x=0;x<rslength;x++)
{
i = Math.floor(Math.random() * chars.length);
randstring += chars.charAt(i);
}

if(randstring.charAt(0) == chars.charAt(got.length))
{
got += randstring.charAt(0);
decrypted.innerHTML = got;
}
else
{
encrypted.innerHTML = randstring;
}

if(chars.length > got.length)
{
setTimeout("change()", 10);
}
else
{
encrypted.innerHTML = "";
}
}
function startdecrypt()
{
var decrypted = document.getElementById("decoded");
var encrypted = document.getElementById("encoded");

chars = decrypted.innerHTML;
decrypted.innerHTML = "";
got = "";
setTimeout("change()", 10);
}
</script>
</head>
<body onLoad="javascript:startdecrypt()">
<h1> </h1>
<p>
<span id="decoded">Your text goes here.</span><span id="encoded"></span>
</p>
<p>
<input type="button" onClick="javascript:startdecrypt()" value="Start">
</p>
</body>
</html>

**mike@parterns** · 03-28-2007, 04:51 PM

I think this is what you were asking for. If not let me know.

Code:

<html> 
<head> 
<title>Decrypting Text Effect</title> 
<style> 
a:visited{color:black;font-family:verdana} 
a:link{color:black;font-family:verdana} 
a:hover{color:blue;font-family:verdana} 

td {color:black;font-family:verdana;font size:8pt} 
p {color:black;font-family:verdana;font size:8pt;text-decoration: none} 
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none} 
</style> 

<script> 
var got; 
var chars; 
function change() 
{ 
var randstring = ""; 
var rslength = chars.length - got.length; 

var decrypted = document.getElementById("decoded"); 

for(var x=0;x<rslength;x++) 
{ 
i = Math.floor(Math.random() * chars.length); 
randstring += chars.charAt(i); 
} 

if(randstring.charAt(0) == chars.charAt(got.length)) 
{ 
got += randstring.charAt(0); 
decrypted.value = got; 
} 
else 
{ 
var solved =decrypted.value;
decrypted.value = solved+randstring; 
} 

if(chars.length > got.length) 
{ 
setTimeout("change()", 10); 
 } 
} 
function startdecrypt() 
{ 
var decrypted = document.getElementById("decoded"); 

chars = decrypted.value; 
decrypted.value = ""; 
got = ""; 
setTimeout("change()", 10); 
} 
</script> 
</head> 
<body onLoad="javascript:startdecrypt()"> 
<h1>&nbsp;</h1> 
<p> 
<span><input id="decoded" name="decoded" type="text" value="Your text goes here"></span>
</p> 
<p> 
<input type="button" onClick="javascript:startdecrypt()" value="Start"> 
</p> 
</body> 
</html>