I seem to be doing something wrong here. This script works with the prompts, which have been mented out, but not with the textboxes. Am I somehow failing to send the input values to the function?
I'm also having trouble using regular expressions in the if-statements, rather than a clumsy list of punctuation marks.
<html>
<head>
</head>
<body>
<div id="myTypingText"></div>
<label>Say what you want typed</label>
<input class="textBox" id="userInput" />
<label>A pregnant pause... (300?)</label>
<input type="number" id="userBreath" />
<button onclick="printLooper()" href="javascript:;">Submit</button>
<! --input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" --/>
<script type="text/javascript" language="javascript">
var myString = document.getElementById('userInput').value;
//var myString = prompt('Say what you want to see typed','Right here, baby'); //prompts are annoying, i know
//var myDelay = prompt('Type speed (try 50)', 'The higher the number, the slower it types');
//var myBreath = prompt('Now tell me how long to pause at each breath (shift+2)', 'Try 300')
var myBreath = document.getElementById('userBreath').value;
var myArray = myString.split("");
var loopTimer;
function printLooper(){
if(myArray.length > 0 ){
var char = myArray.shift();
if ( char === '@'){
document.getElementById("myTypingText").innerHTML
}else {
document.getElementById("myTypingText").innerHTML += char;
}
} else {
clearTimeout(loopTimer);
}
if (char === ' '){
loopTimer = setTimeout('printLooper()', 20);
} else if (char === ',' || char === '.' || char === '?') {
loopTimer = setTimeout('printLooper()', 220); //fiddle with these 2nd params as you see fit
} else if (char === '@'){
loopTimer = setTimeout('printLooper()', myBreath);
} else {
loopTimer = setTimeout('printLooper()', 47);
}
}
printLooper();
</script>
</body>
</html>
Any help appreciated!
I seem to be doing something wrong here. This script works with the prompts, which have been mented out, but not with the textboxes. Am I somehow failing to send the input values to the function?
I'm also having trouble using regular expressions in the if-statements, rather than a clumsy list of punctuation marks.
<html>
<head>
</head>
<body>
<div id="myTypingText"></div>
<label>Say what you want typed</label>
<input class="textBox" id="userInput" />
<label>A pregnant pause... (300?)</label>
<input type="number" id="userBreath" />
<button onclick="printLooper()" href="javascript:;">Submit</button>
<! --input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" --/>
<script type="text/javascript" language="javascript">
var myString = document.getElementById('userInput').value;
//var myString = prompt('Say what you want to see typed','Right here, baby'); //prompts are annoying, i know
//var myDelay = prompt('Type speed (try 50)', 'The higher the number, the slower it types');
//var myBreath = prompt('Now tell me how long to pause at each breath (shift+2)', 'Try 300')
var myBreath = document.getElementById('userBreath').value;
var myArray = myString.split("");
var loopTimer;
function printLooper(){
if(myArray.length > 0 ){
var char = myArray.shift();
if ( char === '@'){
document.getElementById("myTypingText").innerHTML
}else {
document.getElementById("myTypingText").innerHTML += char;
}
} else {
clearTimeout(loopTimer);
}
if (char === ' '){
loopTimer = setTimeout('printLooper()', 20);
} else if (char === ',' || char === '.' || char === '?') {
loopTimer = setTimeout('printLooper()', 220); //fiddle with these 2nd params as you see fit
} else if (char === '@'){
loopTimer = setTimeout('printLooper()', myBreath);
} else {
loopTimer = setTimeout('printLooper()', 47);
}
}
printLooper();
</script>
</body>
</html>
Any help appreciated!
Share Improve this question asked Sep 14, 2013 at 20:33 racknufracknuf 4243 silver badges12 bronze badges 2-
seems like
myArrayis always null – el Dude Commented Sep 14, 2013 at 20:37 -
You're setting
myBreathonly when the page is first loaded, not when the user enters data into the input field. You need to put that code into an event handler. – Barmar Commented Sep 14, 2013 at 20:39
4 Answers
Reset to default 2You need to have some variables inside your function.
I made a demo and removed the inline js on the button. Use this if useful:
<button id="sub_btn">Submit</button>
var loopTimer;
var char, myString, myBreath, myArray;
function printLooper() {
if (myArray.length > 0) {
char = myArray.shift();
console.log(char);
if (char === '@') {
document.getElementById("myTypingText").innerHTML = '';
} else {
document.getElementById("myTypingText").innerHTML += char;
}
} else {
clearTimeout(loopTimer);
return false; // To the loop will stop when the array is empty
}
if (char === ' ') {
loopTimer = setTimeout(printLooper, 20);
} else if (char === ',' || char === '.' || char === '?') {
loopTimer = setTimeout(printLooper, 220); //fiddle with these 2nd params as you see fit
} else if (char === '@') {
loopTimer = setTimeout(printLooper, myBreath);
} else {
loopTimer = setTimeout(printLooper, 47);
}
}
document.getElementById('sub_btn').onclick = function () {
myString = document.getElementById('userInput').value;
myBreath = document.getElementById('userBreath').value;
myArray = myString.split("");
printLooper(myString, myBreath, myArray);
};
Demo here
This syntax has extra characters you probably typo'd in there. I also have never seen a button element with the href attribute before but I don't get out much. You might want to revisit this.
<button onclick="printLooper()" href="javascript:;">Submit</button>
You should put these lines inside the function
var myString = document.getElementById('userInput').value;
var myBreath = document.getElementById('userBreath').value;
var myArray = myString.split("");
It's empty because you put it outside the function and initially the inputs are empty and inside the function if(myArray.length > 0 ) is always false, you need to populate the array once the function is called after the button pressed and also href is not a valid attribute for button as another answer stated it.
var myString = document.getElementById('userInput').value;
//var myString = prompt('Say what you want to see typed','Right here, baby'); //prompts are annoying, i know
//var myDelay = prompt('Type speed (try 50)', 'The higher the number, the slower it types');
//var myBreath = prompt('Now tell me how long to pause at each breath (shift+2)', 'Try 300')
var myBreath = document.getElementById('userBreath').value;
var myArray = myString.split("");
Move these inside the function.