CODEWITHSUNDEEP
javascripthtml
SillyJemima
SillyJemima

Reputation: 5

clear textarea field after hitting submit?

I have a textarea that users can paste/type a block of text into. However, I want the input text to disappear once the user clicks submit.

I'm having problems doing this as I think I end up clearing the input text before it has had a chance to submit?

Upvotes: 0

Views: 424

Answers (1)

shalini mandal
shalini mandal

Reputation: 161

Get the input element and set its value to an empty string.

Add this line in after appending the input value.

document.getElementById("input").value = '';


// enter or paste a block of text, once button SUBMIT TEXT is clicked, words can be selected  to black out.//
let btn = document.getElementById("btn");
let inputValue = document.getElementById("input").value;

btn.addEventListener("click", () => {
  let inputValue = document.getElementById("input").value;

  // loops through each word that has been typed/pasted into TEXTAREA//
  inputValue.split(" ").forEach(word => {
    const element = document.createElement("span");

    //and then creates a span for each individual word so that each one can be clickable//
    element.innerHTML = word;
    document.body.appendChild(element);
    document.getElementById("myPoetry").appendChild(element);
    
    document.getElementById("input").value = '';

    //once a user clicks on a span, the background colour will change to black
    //(.highlighted in css), thus creating the blackout poetry tool
    //if a user clicks on the word again, it will 'deselect' it, turning it back to a
    //white background
    element.onclick = () => {
      element.classList.toggle("highlighted");
    };
  });
});
<div class="container">            
            <textarea id='input' placeholder="Copy & paste a block of text you'd like to create poetry from!" ></textarea> 
            <div class="myPoetry" id ="myPoetry"></div>
        </div>
                      
        <div class= "button">
            <button id="btn">Submit Text</button>
            <button id="download">Save</button>
        </div>

Upvotes: 1

Related Questions