How do I send textbox values to javascript function?

Question

I seem to be doing something wrong here. This script works with the prompts, which have been commented 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!

You're setting myBreath only 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
– Barmar, Commented Sep 14, 2013 at 20:39

Sergio · Accepted Answer · 2013-09-20 20:14:29Z

2

You 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

edited Sep 20, 2013 at 20:14

answered Sep 14, 2013 at 20:45

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

racknuf Over a year ago

Hi folks - I appreciate the feedback. Sergio, in your demo, I seem to be getting the first letter of the string I enter into the textbox repeated ad infinitum... Am I doing something wrong?

Sergio Over a year ago

@tremstat, I am not sure of what you want to do with your code. I assumed you were aware of what the code does (many loops) and helped getting it working. For example if you have @ | 1000 you get the @ in the console every 1000, wich is the variable myBreath . Is that not expected?

racknuf Over a year ago

thanks for the response. I'm trying to take text users would enter into a text box, and print it back out in the way a typewriter would, which the pauses between characters depending on punctuation, spaces and the @, which would make for a longer breath. If I plug text into a global variable, I can make it work, but I'm stuck grabbing it from a textbox.

Sergio Over a year ago

@tremstat, check my updated answer and demo. Was that what you were looking for?

Deryck · Accepted Answer · 2013-09-14 20:41:01Z

0

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>

answered Sep 14, 2013 at 20:41

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Comments

The Alpha · Accepted Answer · 2013-09-14 20:44:36Z

0

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.

edited Sep 14, 2013 at 20:44

answered Sep 14, 2013 at 20:39

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

Irfan TahirKheli · Accepted Answer · 2013-09-14 20:46:55Z

0

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.

answered Sep 14, 2013 at 20:46

Irfan TahirKheli

3,6621 gold badge25 silver badges36 bronze badges

Collectives™ on Stack Overflow

How do I send textbox values to javascript function?

4 Answers 4

Demo here

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Demo here

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related