Textarea value not cleared

Question

So my problem is that I have a HTML <textarea> element and a button which should clear the textarea. But for some reason this does not work. What am I doing wrong?

function clear() {
  document.getElementById('output').value = '';
}

<textarea spellcheck="false" rows="8" cols="80" id="output">Lorem Impsum</textarea>
<button onclick="clear()">Clear Output</button>

score 3 · Answer 1 · answered Feb 25 '22 at 15:57

clear is a reserve word in JavaScript. Please change the name of your function.

function clearText() {
   document.getElementById('output').value = '';
}

<textarea spellcheck="false" rows="8" cols="80" id="output">Lorem Impsum</textarea>
<button onclick="clearText()">Clear Output</button>

jahilldev · Answer 2 · 2022-02-28T17:28:44.073

1

You're clearing the HTML property, but the function name is reserved. To clear the element you can do:

function clearOutput() {
  const el = document.getElementById('output');
  
  el.value = '';
}

As a side note, you really shouldn't use the onclick attribute, it's better to bind events using addEventListener.

edited Feb 28 '22 at 17:28

answered Feb 25 '22 at 15:53

jahilldev

3,520
4
35
52

Clearing `innerHTML` simply isn't necessary. – isherwood Feb 25 '22 at 16:21

score 1 · Answer 3 · answered Feb 25 '22 at 15:56

Textarea uses .innerHTML not .value and also clear() name wont work because it is already defined in vanilla javascript so clear1(). The below code should work -

function clear1() {
  document.getElementById('output').innerHTML = '';
}

<textarea spellcheck="false" rows="8" cols="80" id="output">Lorem Impsum</textarea>
<button onclick="clear1()">Clear Output</button>

Textarea value not cleared

3 Answers3