Why output element is not displayed?-CodePudding

i am writing a simple app that displays how many characters the user can add inside a text area without exceeding an upper limit. The problem is that the output tag does not display result.

<!doctype html>
<html lang="el">

<head>
    <title>Count Characters</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <style>
        label{
        font-size: 44.5px;
        position: relative;
        left: 5%;
        font-family: "Times New Roman", Times, serif;
        }
    </style>

</head>

<body>

    <form name="myForm">
        <label for id="mytext"> CountLetters </label> <br>
        <textarea id="mytext" name="aboutMe" rows="4" cols="50" maxlength="500" placeholder="write here yout text"></textarea>
        <br>
        <output id="charsleft"></output> 
         <br> 
         <br>
    </form>


<script> 
    const textinput = document.querySelector("#mytext");
    textinput.addEventListener("input",(e)=>{
        charsleft.value=`You can Add ${textinput.maxLength-chars.value.length} characters`
    });
</script>


</body>
</html>

CodePudding user response：

Please note that this is invalid HTML markup:

<label for id="mytext">

You need to remove the id attribute, because the for attribute references the id of the labelable element that the <label> is associated to.

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

What you had was essentially an empty for attribute and a duplicate element id. Every id attribute on a webpage should be unique; there can be no duplicates. Your querySelector call was grabbing your <label> instead of your <textarea>.

Corrective measures

Now, you can simplify this.

Use the event parameter's target property to access the event element
Do not display the message, if the input is cleared

document.querySelector('#mytext')
  .addEventListener('input', ({ target: { maxLength, value: { length } } }) => {
    charsleft.value = length > 0
      ? `You can add ${maxLength - length} characters`
      : '';
  });

label {
  font-size: 44.5px;
  position: relative;
  left: 5%;
  font-family: "Times New Roman", Times, serif;
}

<form name="myForm">
  <label for="mytext">Count Letters</label>
  <br>
  <textarea id="mytext" name="aboutMe"
    rows="4" cols="50" maxlength="500"
    placeholder="write here yout text"></textarea>
  <br>
  <output id="charsleft"></output>
  <br>
  <button type="reset">Reset</button>
</form>

CodePudding user response：

Does changing the for attribute as I assume it was a typo to use for id, and chars to mytext fix your problem? Though it is better to explicitly define the variables used.

const textinput = document.querySelector("#mytext");
textinput.addEventListener("input", (e) => {
  charsleft.value = `You can Add ${mytext.maxLength-mytext.value.length} characters`
});

label {
  font-size: 44.5px;
  position: relative;
  left: 5%;
  font-family: "Times New Roman", Times, serif;
}

<form name="myForm">
    <label for="mytext"> CountLetters </label> <br>
    <textarea id="mytext" name="aboutMe" rows="4" cols="50" maxlength="500" placeholder="write here yout text"></textarea>
    <br>
    <output id="charsleft"></output>
    <br>
    <br>
  </form>

CodePudding user response：

This code work perfectly

<!doctype html>
<html lang="el">

<head>
  <title>Count Characters</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <style>
    label {
      font-size: 44.5px;
      position: relative;
      left: 5%;
      font-family: "Times New Roman", Times, serif;
    }
  </style>

</head>

<body>

  <form name="myForm">
    <label for="mytext"> CountLetters </label> <br> <!--  for id="mytext" => for="mytext" -->
    <textarea id="mytext" name="aboutMe" rows="4" cols="50" maxlength="500" placeholder="write here yout text"></textarea>
    <br>
    <output id="charsleft"></output>
    <br>
    <br>
  </form>

  <script>
    const textinput = document.querySelector("#mytext");
    const charsleft = document.querySelector("#charsleft");
    textinput.addEventListener("input", (e) => {
      const maxLength = Number(e.target.getAttribute('maxlength'));
      const value = e.target.value;
      charsleft.innerHTML = `You can Add ${maxLength-value.length} characters`
    });
  </script>

</body>

</html>