javascript - 如何将文本框值发送到 javascript 函数?

标签 javascript html

我这里好像做错了什么。此脚本适用于已被注释掉的提示,但不适用于文本框。我是否以某种方式未能将输入值发送到函数?

我也无法在 if 语句中使用正则表达式,而不是使用笨拙的标点符号列表。

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

感谢任何帮助!

最佳答案

您的函数中需要有一些变量。

我做了一个demo,去掉了按钮上的内联js。 如果有用,请使用它:

<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);
};

演示 here

关于javascript - 如何将文本框值发送到 javascript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18806143/

相关文章:

javascript - 有什么方法可以在Javascript中同时显示隐藏多个密码吗?

html - 正则表达式:查找特定文本周围的第一个标签

html - 如何覆盖一个div

javascript - jQuery 如何获取上次单击元素的类或 ID?

javascript - 如何显示 Algolia 搜索查询的匹配词?

javascript - 如何使用 Jquery 修复游戏中自动生成的食物

css - figcaption 标签在 figure 标签中图像上的居中和对齐宽度

javascript - 来自 Canvas 的 "DOM Exception 18"

javascript - 让 React 引导组件(popover)自动改变位置

html - 文本与文本框的水平对齐