Сброс обратного отсчета персонажа при нажатии кнопки

Question

Как я могу восстановить обратный отсчет времени до 150 при нажатии кнопки "Отправить"? Прямо сейчас у меня есть текстовое поле ввода, которое вы вводите, и оно отсчитывает, сколько символов осталось, а затем, когда вы хотите отправить его, вы нажимаете кнопку отправки, и оно добавляет его в таблицу. Но проблема в том, что число остается прежним и не сбрасывается до 150, пока вы не начнете вводить текст в поле снова. Я хочу, чтобы он автоматически сбрасывался до 150 при нажатии кнопки "Отправить". Что мне нужно будет добавить в мой код?

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

Просто объявите это

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

Добавь это

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

на ваш

btn.onclick

Answer 3

Попробуйте добавить это на событие загрузки страницы: $(document).ready(function(){$('#status').focus(left=(150-inpt.value.length));});В этом фрагменте кода я предположил, что идентификатор вашего текстового поля равен "status", а "left" объявлено как глобальная переменная. Я не могу попробовать твой код возиться. Я думаю, что скрипка ведет себя забавно прямо сейчас.

Answer 4

Нет необходимости смешивать обработчики событий сценариев jquery и vanila

$(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>