Как сделать так, чтобы счетчик персонажей работал, не появляясь внутри поля ввода?

Question

Я хотел бы знать, почему всякий раз, когда я переключаю тег <input> на тег <p>, мой счетчик символов вообще не появляется. Я хочу, чтобы деталь Characters remaining: не находилась внутри тега <input>. Я пробовал много способов решить эту проблему, но ударил стену, мне просто нужна другая пара глаз, чтобы увидеть это.

Что я делаю не так и как мне это решить? JSFiddle предоставлен для справки.

https://jsfiddle.net/2b38k9zt/

var txtBoxRef = document.querySelector("#txtBox");
var counterRef = document.querySelector("#counterBox");
txtBoxRef.addEventListener("keydown",function(){
    var remLength = 0;
    remLength = 0 + parseInt(txtBoxRef.value.length);
    if(remLength < 0) {
        txtBoxRef.value = txtBoxRef.value.substring(0, 200);
        return false;
    } else if(remLength > 200) {
        counterRef.style.color = "red";
    }
    counterRef.value = "Characters remaining: " + remLength + "/200";
},true);

<textarea style="width: 600px;" id="txtBox"></textarea>
<input type="text" id="counterBox"/>

Answer 1

Тег

input имеет атрибут value, а для тега p следует использовать textContent:

var txtBoxRef = document.querySelector("#txtBox");
var counterRef = document.querySelector("#counterBox");
var pRef = document.querySelector("#pBox");
txtBoxRef.addEventListener("keydown",function(){
    var remLength = 0;
    remLength = 0 + parseInt(txtBoxRef.value.length);
    if(remLength < 0) {
        txtBoxRef.value = txtBoxRef.value.substring(0, 200);
        return false;
    } else if(remLength > 200) {
        counterRef.style.color = "red";
    }
    pRef.textContent = "Characters remaining: " + remLength + "/200";
},true);

<textarea style="width: 600px;" id="txtBox"></textarea>
<input type="text" id="counterBox"/>
<p id='pBox'></p>

Answer 2

Установите ваш ввод в элемент ap и измените эту строку

counterRef.value = "Characters remaining: " + remLength + "/200";

на

counterRef.innerHTML = "Characters remaining: " + remLength + "/200";