Html Question posted in
Some basic documentation can be found here.

Html – Displaying a button when the character counter reaches 100

Trying to do a quizz page and I need for my “Submit” button to appear once the minimum number of characters have been written in the textarea. Here is what I tried but couldn’t get it to work.

<textarea  name="tweet" id="textbox"
          rows="13" cols="70" placeholder="" maxlength="250"></textarea><br>
        <span id="char_count">0/250</span>

        <script>
        let textArea = document.getElementById("textbox");
        let characterCounter = document.getElementById("char_count");
        const minNumOfChars = 0;
        const maxNumOfChars = 250;
        var text = document.getElementById("buton");
        const countCharacters = () => {
          let numOfEnteredChars = textArea.value.length;
          let counter = minNumOfChars + numOfEnteredChars;
          characterCounter.textContent = counter + "/250";
        };
        textArea.addEventListener("input", countCharacters);
        if (counter > 100 ) {
            text.style.display = "block";
        }
        else {
        }
        </script>

              <br><br><br>
              <div>
                <button class="NextStep" id="buton" style="display:none"
                onclick="NextStep()">Finalizare Curs</button>
              </div>
              <script>
             function NextStep() {
                 location.href =("Cursuri.html")
             }
             </script>
Tags:

2

Answers


  1. 0

    Your code has all the necessary parts to work but you have restructured it like a Picasso painting!. With some cut-copy-paste in the right place, it works!

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>ΤΙΤΛΟΣ</title>
   </head>

   <body style="background-color: burlywood;">
      <textarea name="tweet" id="textbox" rows="13" cols="70" placeholder="" maxlength="250"></textarea><br>
      <span id="char_count">0/250</span>
      <br><br><br>
      <div>
         <button class="NextStep" id="buton" style="display:none" onclick="NextStep()">Finalizare Curs</button>
      </div>
      <script>
         let counter
         let textArea = document.getElementById("textbox")
         let characterCounter = document.getElementById("char_count")
         const minNumOfChars = 0
         const maxNumOfChars = 250
         let text = document.getElementById("buton")
         const countCharacters = () => {
            let numOfEnteredChars = textArea.value.length
            counter = minNumOfChars + numOfEnteredChars
            characterCounter.textContent = counter + "/250"
            if (counter > 100) {
               text.style.display = "block"
            }
            else {
               text.style.display = "none"
            }
         }
         textArea.addEventListener("input", countCharacters)
         function NextStep() {
            location.href = ("Cursuri.html")
         }
      </script>
   </body>

</html>
    Login or Signup to reply.
  2. 0

    First, always make sure to place the script tag at the end of the body tag so that it will wait to first fully load the DOM tree before moving in to script part.

    Second, you seem to be wanting to keep track of counter variable, and change the button style based on that. But as @mykaf said, you have declared it wrongly inside the countCharacters function, so it cannot be accessed outside of that function. Read about scope of variable.

    Third, you need to check if value of counter is greater than 100 each time it is changed, but currently you have put the if-else part which checks this, outside of the countCharacters function. So effectively, counter value is getting increased but it is not being checked if greater than 100. So you have to also move that if-else part inside the countCharacters function.

    Overall, your script tag should looks something like this

    <script>
  let textArea = document.getElementById("textbox");
  let text = document.getElementById("buton");
  let characterCounter = document.getElementById("char_count");
  const minNumOfChars = 0;
  const maxNumOfChars = 250;
  let counter;
  const countCharacters = () => {
    let numOfEnteredChars = textArea.value.length;
    counter = minNumOfChars + numOfEnteredChars;
    characterCounter.textContent = counter + "/250";
    if (counter > 100) {
      text.style.display = "block";
    } else {
      // else part here
    }
  };
  textArea.addEventListener("input", countCharacters);
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search