Increasing the sms counter in javascript once it reaches 160 characters

I am facing an issue with my two counters that are used to track the number of characters in a message. Everything works fine until 160 characters, but after that point, the first counter stops at 0 instead of resetting back to 160 and decreasing from there. I need assistance in fixing this issue, please take a look at the code and screenshot provided.

Javascript

function textCounter(field,field2,maxlimit) {
    var countfield = document.getElementById(field2);
    if ( field.value.length > maxlimit ) {            
        countfield.value = 160 - field.value.length;              
    } else {
        countfield.value = maxlimit - field.value.length;
    }
}

HTML

<textarea class="text-input--underbar" placeholder="Enter Message" style="width: 100%; height: 100px;" onkeyup="textCounter(this,'counter',160);" ng-model="message" name="message" id="message"></textarea>
<br>
Remaining Characters : <input disabled  maxlength="3" size="3" value="160" id="counter"> / SMS
<br>
Total SMS(s) : {{ (message.length - message.length % 160) / 160 + 1 }}
<br>

https://i.sstatic.net/3rPiC.png

ADDED

When the text area is empty, the Total SMS(s) shows NaN. How can I set an initial value for it in the expression I have used?

javascriptangularjs

Answer №1

To make the necessary adjustments in your Javascript code, you simply need to modify it as follows:

function characterCount(field, counterField, maxLength) {
    var count = document.getElementById(counterField);
    count.value = maxLength - (field.value.length % maxLength);
}

UPDATE (Handling NaN value):

function characterCount(field, counterField, maxLength) {
    var count = document.getElementById(counterField);
    count.value = isNaN(field.value.length) ? maxLength : maxLength - (field.value.length % maxLength);
}

Answer №2

If you want to find out how many characters are left for each text message, use the following code:

 remainingChars = maxLength - inputField.value.length % maxLength ;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

javascriptjquerycssresponsive-design

Playing with Data in AG-Grid using Javascript

I am working on implementing data display using AG Grid with an AJAX call, but I am facing an issue where no data is being shown in the grid. Even though my AJAX call seems to be functioning correctly and returning the desired object List, the grid itsel ...

javascriptag-grid

Check to see if the upcoming birthday falls within the next week

I'm trying to decide whether or not to display a tag for an upcoming birthday using this boolean logic, but I'm a bit confused. const birthDayDate = new Date('1997-09-20'); const now = new Date(); const today = new Date(now.getFullYear( ...

javascriptangulartypescriptdate

Protractor is unable to interact with the embedded <span> within the <a> tag

I am facing an issue where I have two nested <span> elements inside an <a> tag. My objective is to trigger a click event on the second <span>. I tried using the by.id method on the custom classes I created, but it did not work. I also att ...

javascriptangularjsselenium-webdriverprotractor

React is indicating that returning functions is not appropriate as a React child. This issue may arise if you accidentally return a component instead of <Component /> within the render method

Check out the main game.js and app.js files: //Here is the code in game.js// import React, { Component } from "react"; class Game extends Component { constructor(props) { super(props); this.state = { num: 0 }; this.numPicker = this.numPi ...

javascriptreactjs

Exploring methods to verify a service subscription to a topic provided by a different service

My services provide the following functionalities: @Injectable({ providedIn: 'root' }) export class Service1 { dataHasChanged = new Subject(); private data1; private data2; constructor() {} getData() { return { data1: th ...

javascriptangularangular-testangular-testing-library

What is the best way to implement Media Queries in the Next.js application Router?

I am currently working with Next.js 13 and the App Router. Within my client component, I have implemented media queries in JavaScript to customize sidebar display for small and large screens. "use client"; export default function Feed() { co ...

javascriptreactjsnext.jsserver-side-renderingapp-router

Manipulating the InnerHTML content of a total of 144 individual cells

I am currently developing a tile-based game using tables. Each td cell contains the following code: <td> <div id="image" style="display:none; display: fixed; right: 5; top:2;"><img src="http://thumb7.shutterstock.com/display_pic_with_logo ...

javascripthtmlhtml-table

Will the rel attribute work in all web browsers and with all HTML tags?

Confirming that it is compatible for use with JQuery scripting. ...

javascriptjqueryhtmlcssxhtml

Guide to uploading images to an s3 bucket using angular and ng2-file-upload

Which part of the code needs to be modified in order to upload images to an S3 bucket? uploader: FileUploader = new FileUploader({ url: URL, disableMultipart: true, formatDataFunctionIsAsync: true, formatDataFunction: async (item) => { ...

angularjsfile-uploadamazon-s3ng2-file-upload

I'm encountering an issue in JavaScript while attempting to convert the following string into a JSON object. Can anyone assist in identifying the problem with this string?

How can I correct this string to make it a valid JavaScript JSON object? txt = '{"Categories" : [{"label":"petifores","id":"1"}, {"label":"wedding cake","id":"2"}, {"label":"shapes of cakes","id":"3"}, ...

javascriptphpjqueryjson

collaborative data interchange in angularjs controllers

When it comes to managing shared state between controllers, I often struggle to find the best approach among the many options recommended on forums like Stack Overflow. To help clarify my thoughts, I've created a simple diagram outlining my basic idea ...

angularjs

Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

I'm utilizing the (deferLoad) method to load an image gallery in a more controlled manner. Is there any event available that can inform me about which items are currently visible? The main goal is to load a set of data along with an image path, and t ...

javascriptangulartypescriptlazy-loading

Setting up Supertest and Express together is leading to a timeout error

In my server.test.js file, I have a straightforward setup: import 'regenerator-runtime/runtime'; const request = require('supertest'); const express = require("express") const app = express(); app.get('/user', func ...

javascriptnode.jsexpressjestjssupertest

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Here is the code snippet I am working on: $(".drop-down-arrow-open i").click(function(){ console.log("The click function for .drop-down-arrow-open is triggered even when it is closed"); let thisParent = $(this).closest(".projects-container").find(".need ...

javascriptjqueryhtml

Raycast in Three.js is struggling to locate object

Whenever I select a 3D model, my goal is to retrieve the object's ID, name, or the actual object itself in order to effectively delete it. function onDocumentMouseDown( event ) { if (enableRaycasting){ event.preventDefault(); mouse.set( ( event.c ...

javascriptthree.js

Tips for incorporating real-time information into a highchart graph?

I'm currently working on a Highchart that utilizes AJAX and jQuery for receiving JSON data. However, I've noticed that the points on my chart only appear when I hover over it, and even then they all seem to be clustered at the top of the chart. I ...

javascriptjqueryhighchartsdata-visualization

The Google Apps Script will activate only on weekdays between the hours of 10 AM and 5 PM, running every hour

function Purchase() { var ss=SpreadsheetApp.getActive(); var sheet=ss.getSheetByName("Buy"); var Cvalues=sheet.getRange(2,3,sheet.getLastRow()-1,1).getValues(); var Avalues=sheet.getRange(2,1,sheet.getLastRow()-1,1).getValues(); var r ...

javascriptgoogle-apps-scriptgoogle-sheetstriggers

The default action is not triggered when the click event occurs

Hey there, I have been working on this <ol> list of events using jQuery (version 1.4.2). Everything is set up within the $(document).ready() function. Something strange is happening where when I click on the <li>, it triggers a click on the co ...

javascriptjqueryhtmlevents

The error message "Cannot access property 'findAll' of undefined in expressjs" is displayed

An issue has occurred with ExpressJS: TypeError - Cannot read property 'findAll' of undefined. It seems that all Sequelize functions are not working correctly. Numerous errors are popping up, such as "Cannot read property 'sequelize method& ...

javascriptnode.jsexpresssequelize.js