Question

我刚开始学习Javascript。我有两个关于TextCounter＆amp; amp;的问题。触发innerHTML。

我的代码如下，如何分别触发两个输入的innerHTML？
为什么警报信息是＆＃34;结束!!＆＃34;删除textarea中的单词数时仍显示？

有人可以帮忙吗？非常感谢！

HTML

<html>
<head>
</head>
<body>

    <form>
      <textarea name="line01" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form.01,this.form.countDisplay01,10);" 
onKeyDown="textCounter(this.form.01,this.form.countDisplay01,10);">
      </textarea>
      <br>
      <input readonly type="text" name="countDisplay01" width: 25px" 
value="10">characters remaining
      <p id="go1"></p> 
    </form>

    <form>
      <textarea name="line02" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form.02,this.form.countDisplay02,8);" 
onKeyDown="textCounter(this.form.02,this.form.countDisplay02,8);">
      </textarea>
      <br>
      <input readonly type="text" name="countDisplay02" width: 25px" 
value="8">characters remaining
      <p id="go2"></p> 
    </form>
</body> 
</html>

的Javascript

<script> 
    function textCounter(textField, showCountField, maxAmount) {
        if (textField.value.length <= maxAmount) {
          showCountField.value = maxAmount - textField.value.length;
        } else {
          document.getElementById("go1").innerHTML = "<span 
style='color:red'>Over!!</span>";
          document.getElementById("go2").innerHTML = "<span 
style='color:red'>Over!!</span>";
          textField.value = textField.value.substring(0,maxAmount);
        } 
</script>

Answer 1

由于您使用的是以数字开头的名称，因此它不是有效变量。您应该通过字典查找来访问它：

textCounter(this.form['01'],this.form.countDisplay01,10);

对于提醒文字，您应该重置第一个innerHTML子句中的if：

if (textField.value.length <= maxAmount) {
  showCountField.value = maxAmount - textField.value.length;
  document.getElementById("go1").innerHTML = "";
  document.getElementById("go2").innerHTML = "";
} else {
  document.getElementById("go1").innerHTML = "<span style='color:red'>Over!!</span>";
  document.getElementById("go2").innerHTML = "<span style='color:red'>Over!!</span>";
  textField.value = textField.value.substring(0,maxAmount);
}

这将在下一次按键时删除警报文本。如果要立即删除文本，您有两个选择：

忘记显示错误。
显示大约几分之一秒的错误，然后将其删除。使用setTimeout之类的东西。但是你应该记住，在从函数返回之前，窗口不会重绘。因此，首先设置警报文本，然后在功能结束时将其删除，将与执行选项1相同。

Answer 2

尝试使用以下代码

<强> HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Counter</title>
</head>
<body>
<form>
<textarea name="01" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form['01'],this.form.countDisplay01,10,1);" 
onKeyDown="textCounter(this.form['01'],this.form.countDisplay01,10,1);">
</textarea>
<br>
<input readonly type="text" name="countDisplay01" style="width: 25px;" value="28"> characters remaining
<p id="go1"></p> 
</form>

<form>
<textarea name="02" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form['02'],this.form.countDisplay02,8,2);" 
onKeyDown="textCounter(this.form['02'],this.form.countDisplay02,8,2);">
</textarea>
<br>
<input readonly type="text" name="countDisplay02" style="width: 25px" value="15">characters remaining
<p id="go2"></p> 
</form>
</body>
</html>

<强> SCRIPT

<script> 
function textCounter(textField, showCountField, maxAmount,id) {
    if (textField.value.length <= maxAmount) {
        showCountField.value = maxAmount - textField.value.length;
        document.getElementById('go'+id).innerHTML  = '';
    } else {
        document.getElementById('go'+id).innerHTML  = '<span style="color:red">Over!!</span>';
        textField.value = textField.value.substring(0,maxAmount);
    } 
}
</script>

TextCounter＆amp;在两个单独的输入区域中触发innerHTML

2 个答案: