Javascript 文本计数器&；在两个单独的输入区域中触发innerHTML_Javascript

Javascript 文本计数器&；在两个单独的输入区域中触发innerHTML

javascript

Javascript 文本计数器&；在两个单独的输入区域中触发innerHTML,javascript,Javascript,我刚开始学习Javascript。关于TextCounter和Trigger innerHTML，我有两个问题下面是我的代码，如何分别为两个输入触发innerHTML 为什么删除文本区域中的字数时仍显示“结束！！”的警报信息有人能帮忙吗？非常感谢 HTML <!doctype html> <html> <head> <meta charset="utf-8"> <title>Text Counter</title> &l

我刚开始学习Javascript。关于TextCounter和Trigger innerHTML，我有两个问题

下面是我的代码，如何分别为两个输入触发innerHTML

为什么删除文本区域中的字数时仍显示“结束！！”的警报信息

有人能帮忙吗？非常感谢

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>




剩余字符

Javascript


函数textCounter（textField、showCountField、maxAmount）{
如果（textField.value.length因为您使用了以number开头的名称，则该名称不是有效变量。您应该通过字典查找来访问它：
textCounter(this.form['01'],this.form.countDisplay01,10);

对于警报文本，应在第一个if
子句中重置innerHTML
：
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);
}

if（textField.value.length尝试以下代码
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> 
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（textField、showCountField、maxAmount、id）{
if（textField.value.length）非常感谢您的帮助！！它工作得非常好！没有意识到我在这里粘贴了错误的名称格式。很尴尬。非常感谢您的帮助和解释！！
<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>