Set span text from Javascript function

▲
0
▼

Edited: make sure to add '' surrounding the control you're adding to the Javascript function call.

I'm working with Asp.net textbox controls and setting a character countdown in a span tag. When I set did this as a jquery referencing the specific controls it worked fine. However, given that I'll be using this several times throughout my project I wanted to adapt it as a seperate javascript function. I need to pass the textbox control (to get the current count), maxcharacters (allowed) and the span control (to display characters remaining).

Below is what I have thus far and it works except the last two lines. I get a undefined variable error, "0x800a138f - JavaScript runtime error: Unable to set property 'innerHTML' of undefined or null reference". I've tried using val, value, innertext, etc. The issue seems to be that it's not picking up the span control that I'm passing.

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

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

Any ideas or suggestions would be appreciated... TIA

javascript
html
asp.net
function
textbox
asked on Stack Overflow Aug 21, 2016 by Steve • edited Aug 21, 2016 by Steve

2 Answers

▲
0
▼

I don't know much about asp.net, but here is a full client side version of what you're trying to accomplish:

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

answered on Stack Overflow Aug 21, 2016 by WorkingRobot
▲
0
▼

See edit note above

Added aprostophe's to control being added to the Javascript function call

<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>
answered on Stack Overflow Aug 21, 2016 by Steve

User contributions licensed under CC BY-SA 3.0