Reset character countdown on button click

Question

How can I make my character countdown reset back to 150 when my submit button is clicked? Right now I have a input text box that you type in and it counts down how many characters you have left and then when you want to submit it, you click the submit button and it adds it to a table. But the problem is that the number stays the same and doesn't reset back to 150 until you start typing in the box again. I want it to automatically reset to 150 when you click the submit button. What will I need to add to my code?

http://jsfiddle.net/julianbuscema/qv0zd8pv/

$(document).ready(function(){
    var left = 150
    $('#text_counter').text(left);

    $('#status').keyup(function () {

        left = 150 - $(this).val().length;

        if(left < 0){
            $('#text_counter').addClass("overlimit");
        }
        if(left >= 0){
           $('#text_counter').removeClass("overlimit");
        }

        $('#text_counter').text(left);
    });
});

Answer 1

just re declare it

var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("post")[0];

btn.onclick = function () {
    if (!inpt.value) alert("Please enter something to post.");

    if (inpt.value.length < 10) {
        alert("Post must be at least 10 characters.");
        return false;
    } else {

    } 

    var tbl = document.getElementsByTagName("table")[0];
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    var txt = document.createTextNode(inpt.value);
    cell.appendChild(txt);
    tbl.insertRow(0);
    tbl.insertRow(0);

    inpt.value = "";
     $('#text_counter').text(150);

};

$(document).ready(function(){
    var left = 150
    $('#text_counter').text(left);

        $('#status').keyup(function () {

        left = 150 - $(this).val().length;

        if(left < 0){
            $('#text_counter').addClass("overlimit");
        }
        if(left >= 0){
            $('#text_counter').removeClass("overlimit");
        }

        $('#text_counter').text('Characters left: ' + left);
    });
});

Answer 2

Add this

$("#text_counter").text(150);

to your

btn.onclick

Answer 3

There is no need to mix both jquery and vanila script event handlers

$(document).ready(function() {
  var limit = 15;

  var $counter = $('#text_counter').text(limit);
  var $input = $('#status').keyup(function() {

    var left = limit - $(this).val().length;
    $counter.toggleClass("overlimit", left < 0).text('Characters left: ' + left);
  });

  $('button').click(function() {
    var val = $input.val();

    if (val.length < 10) {
      alert("Post must be at least 10 characters.");
      return;
    }

    $('table').append('<tr><td>' + val + '</td></tr>');
    $input.val('');
    $counter.text(limit).removeClass('overlimit');
  })

});

$(document).ready(function() {
  var limit = 15;

  var $counter = $('#text_counter').text(limit);
  var $input = $('#status').keyup(function() {

    var left = limit - $(this).val().length;
    $counter.toggleClass("overlimit", left < 0).text('Characters left: ' + left);
  });

  $('button').click(function() {
    var val = $input.val();

    if (val.length < 10) {
      alert("Post must be at least 10 characters.");
      return;
    }

    $('table').append('<tr><td>' + val + '</td></tr>');
    $input.val('');
    $counter.text(limit).removeClass('overlimit');
  })

});

input[type=text] {
  padding: 5px;
  border: 2px solid #000080;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
input[type=text]:focus {
  border-color: #ccc;
}
-webkit-border-radius:5px;
 border-radius:5px;

}
.rows {
  text-align: center;
}
.postTable {
  width: 400px;
  height: 33px;
  border: solid 1px lightgray;
  border-width: 2px;
  font-family: Verdana;
  font-size: 20;
}
td {
  border-bottom: solid 2px lightgray;
}
tr:last-child td {
  border: none!important;
}
.overlimit {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="postBox">
  <center>
    <input type="text" id="status" name="post" maxlength="150" /> <span id="text_counter"></span>

    <br>
    <br/>
    <button style="border : solid 0px #000080; border-radius : 4px; moz-border-radius : 4px; -webkit-box-shadow : 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0); box-shadow : 0px 0px 5px rgba(0,0,0,1.0); font-size : 24px; font-style : ;color : #ffffff; padding : 4px 10px; background-color : #000080;">subpost</button>
    <br/>
    <br/>
    <table name="rows" class="postTable"></table>
    <td></td>
    <tr></tr>
  </center>
</div>

Answer 4

Try adding this on your page onload event: $(document).ready(function(){$('#status').focus(left=(150-inpt.value.length));}); In that code snippet, I've assumed that your textbox's id is "status" and "left" is declared as a global variable. I can't try your code to fiddle. I think fiddle is acting funny right now.