Работа скрипта подсчета символов в статье

Проще, когда ты наглядно увидишь как работает то, о чем я пишу. Это как в той поговорке: «Лучше 1 раз увидеть, чем…» Ну, короче, в курсе…

Скрипт

Скрипт представляет из себя 2 части:

1. js-код;
2. html-код.

js-код

Размещаем его по возможности в отдельном файле, но можно и непосредственно в html-коде:

<script>
  var price = 30;
  function countChar() {
    var is_probel = document.getElementById("is_probel"); 
    var count_char = document.getElementById("count_char");
    var count_char_textarea = document.getElementById("count_char_textarea");
    var price_out = document.getElementById("price_out");
    if (is_probel.checked == false) {
        count_char.value = count_char_textarea.value.replace(/ *\n*\r*\t*/g, "").length;
    }
    else { 
        count_char.value = count_char_textarea.value.length;
    }
    price_out.innerHTML = (parseInt(count_char.value) / 1000) * price;
  }
</script>

Где первая строчка (переменная price) – это цена за 1000 символов. Можно удобно и просто менять.

html-код

Вот непосредственно волшебная форма, которая считает у нас напечатанные «в нее» символы.

<div id="count_char_block">
  <textarea id="count_char_textarea" onchange="countChar()" onkeyup="countChar()" ></textarea><br/>
  <input type="text" id="count_char" value="0" readonly="readonly" />
  <input type="checkbox" id="is_probel" onchange="countChar()" />
  <label for="is_probel">Учитывать пробелы</label>
  <div>Стоимость написания текста составит: <span  id="price_out">0</span> руб.</div>
</div>

Вроде все просто!