从Javascript函数设置跨度文本

Set span text from Javascript function

本文关键字：文本 设置 Javascript 函数      更新时间：2023-09-26

编辑:确保在添加到Javascript函数调用的控件周围添加"。

我正在使用Asp.net文本框控件并在span标记中设置字符倒计时。当我将其设置为引用特定控件的jquery时，它工作得很好。然而，考虑到我将在整个项目中多次使用它，我想将其作为一个单独的javascript函数。我需要传递文本框控件(获取当前计数)，maxcharacters(允许)和span控件(显示剩余字符)。

下面是我到目前为止的代码，除了最后两行之外，它可以正常工作。我得到一个未定义的变量错误，"0x800a138f - JavaScript运行时错误:无法设置未定义或空引用的属性'innerHTML'"。我试过使用val, value, innertext等。问题似乎是，它没有拿起我正在传递的span控件。

HTML 

    <div class="input-group">
    <asp:TextBox runat="server" ID="textbox1" CssClass="form-control" placeholder="Class Description" MaxLength="75"
         onkeyup="getCount(this,75,'textcharacters');"></asp:TextBox>
    <span class="input-group-addon"  id="textcharacters"></span>
    </div>
Javascript 

    function getCount(evt, length, char) {
    var lengthCount = evt.value.length;
    if (lengthCount > length) {
       this.value = this.value.substring(0, length);
       var charactersLeft = length - lengthCount + 1;
    }
    else {
       var charactersLeft = length - lengthCount;
    }
    var outputElement = document.getElementById(char);
    outputElement.innerHTML = charactersLeft;
    }
如有任何想法或建议，我将不胜感激。TIA

我不太了解asp.net，但这里有一个完整的客户端版本，您正在尝试完成:

<!DOCTYPE html>
<html>
<body>
  <textarea id="countdown" oninput="charcalculate('countdown', 'chartext', 75);"></textarea>
  <br/>
  <span id="chartext">750</span> characters left
</body>
<script>
  //Make sure to put this script under the tags, or else, the javascript doesn't know them.
  function charcalculate(textarea, chartext, limit) {
    //                              get the textarea DOM object    get the length of the value of the text area
    var textcount = parseInt(document.getElementById('countdown').value.length);
    //if more than the limit, delete the written character (copy and paste sort of bypasses this)
    if (textcount > limit) {
      document.getElementById('countdown').value = document.getElementById('countdown').value.substring(0, textcount - 1);
      return;
    }
    //     get the span tag DOM object's value/HTML  and subtract the limit by the length of the textarea
    document.getElementById('chartext').innerHTML = limit - textcount;
  }
</script>
</html>

参见上面的编辑说明

添加prostophe's来控制被添加到Javascript函数调用

<div class="input-group">
<asp:TextBox runat="server" ID="textbox1" CssClass="form-control" placeholder="Class Description" MaxLength="75"
     onkeyup="getCount(this,75,'textcharacters');"></asp:TextBox>
<span class="input-group-addon"  id="textcharacters"></span>
</div>
相关文章：