Counting characters in a text input box

Ask the community
,
1

Can anyone help please - would be v grateful. This was working and now I’ve done something (and I don’t know what!) and it’s not.
The countingcharacters is an input text box.
Thank you!

import wixData from 'wix-data';

$w("#Subject").maxLength = 50;
$w("#textBox1").maxLength = 1000;

export function textBox1_change(event) {
 const remainingLength = $w('#textBox1').maxLength - $w('#textBox1').value.length;
  ('#countingcharacters').text = "Only ${remainingLength} remaining characters.";
}
2

In the last line:

$w ( ‘#countingcharacters’ ). text = ** Only ${remainingLength} remaining characters. ** ;

//use this instead of quotes

3

Thank you so much for coming back. However when I put this in, I get an error message saying that text (ie the red squiggle line underneath the .text after (‘#countingcharacters’) doesn’t exist on countingcharacters. This is an text input text box (read only, no initial text showing, enabled but no event handlers)

import wixData from 'wix-data';

$w("#Subject").maxLength = 50;
$w("#textBox1").maxLength = 1000;

export function textBox1_change(event) {
 const remainingLength = $w('#textBox1').maxLength - $w('#textBox1').value.length;
 $w('#countingcharacters').text = `Only ${remainingLength} remaining characters.`;
}
4

update - if I change .text to value it works on the preview but not on the published site??

import wixData from 'wix-data';

$w("#Subject").maxLength = 50;
$w("#textBox1").maxLength = 1000;


export function textBox1_keyPress(event) {
 const remainingLength = $w('#textBox1').maxLength - $w('#textBox1').value.length;
    $w('#countingcharacters').value = `Only ${remainingLength} out of 1000 characters remaining`;
}
5

@knightmaidstone is countingcharacters an input element or a text element?

6

it’s an input element. I tried with a text element too and again works in preview but not on live site.

7

  1. Why are you importing wixData? I don’t see you use it in your code?

  2. All the $w() should be wrapped in $w.onReady(() => {/here/}) (unless they’re inside a function that’s called after the $w is ready) .