JavaScript decreasing value depending on input-CodePudding

I had found this code on the internet somewhere a while ago to decrease the number depending on how many values have been inputted, I am not good with JavaScript at all and will be learning about it more soon.

But i just need an explanation of what the JS function does row by row.

function numberOfCharacters(textbox,limit,indicatore){
  chars = document.getElementById(textbox) .value.length;
  document.getElementById(indicatore).innerHTML = limit-chars;

}

<textarea rows="4" maxLength="255" onkeyup="numberOfCharacters('mytextbox',255,'characterLimit');" name="contact_message" id="mytextbox" placeholder="Message (255 Characters)"required></textarea>
                    
<div >
     <span id="characterLimit">255</span>
</div>

CodePudding user response：

On change of the textarea (accessed through onkeyup event), the numberOfCharacters function will be triggered.

It recieves the id of the textarea ('mytextbox'), limit of text area (255) and the id where you need to update the character limit ('characterLimit').

The function numberOfCharacters access the input in the text area and count the length of the input. The remaining limit of textarea will be the actaual limit in the function parameter (255) minus the length of current input. Function calculates that difference value and update your target div content.

/*
  * Function name : numberOfCharacters
  * Parameters
  *   textbox: String: Id of the input textarea
  *   limit: Number: Actual limit of the textarea
  *   indicatore: String: Id of the element where the linit is displayed
*/
function numberOfCharacters(textbox, limit, indicatore) {
  // Access the input in the textarea with document.getElementById(textbox).value
  // And
  // Access the length of current input with document.getElementById(textbox).value.length
  chars = document.getElementById(textbox).value.length;

  // Calculate the length of remaning characters and update the content of div element  with id characterLimit as the differnce
  document.getElementById(indicatore).innerHTML = limit - chars;
}

<textarea rows="4" maxLength="255" onkeyup="numberOfCharacters('mytextbox',255,'characterLimit');"
  name="contact_message" id="mytextbox" placeholder="Message (255 Characters)" required></textarea>

<div >
  <span id="characterLimit">255</span>
</div>

CodePudding user response：

This function handles the onKeyUp event of the text input, so the function is trigger each time a key is released on the keyboard while the input has focus.

The function is called with 3 arguments bound: this id of the field, the max number of character and the id of the span in which is written the indicator of how many characters are left before maximum is reached.

function numberOfCharacters(textbox,limit,indicatore){
  chars = document.getElementById(textbox).value.length; // <-- get the current number of characters having been typed in the text input
  document.getElementById(indicatore).innerHTML = limit-chars; // <-- write the result of the substraction in the indicator span.

}

CodePudding user response：

The numberOfCharacters function basically shows number of available characters you can type in your text area. In your case character limit is 255.

Let's see what the function does step by step.

function numberOfCharacters(textbox,limit,indicatore){ ..., function is declared and it accepts 3 arguments, where textbox is an id of <textarea>, limit of characters and indicatore which is a id of <span>.
chars = document.getElementById(textbox) .value.length; In this row we get total length of typed characters in field box.
Calculate the value bydocument.getElementById(indicatore).innerHTML = limit-chars; We fill our span tag with number of characters that left. <span id="characterLimit">(calculated value)</span>