Can't enable textarea after disabling it

Question

I want to disable textarea when button is pressed and enable it back again when another button is pressed. Right now I can disable it but I can't get it to be enabled again.

HTML:

<textarea rows='14' id="value"> </textarea>

<button class="continue" onclick="return cont()">CONTINUE</button>
<button class="clear" onclick="return clear()">CLEAR</button>

JS:

function cont(){
        document.getElementById("value").value = 'hello';
        document.getElementById("value").readOnly = true;
        setTimeout('cont()',1000);
      }
function clear(){
        document.getElementById("value").readOnly = false;
        document.getElementById("value").value = 'empty';
        setTimeout('clear()',1000);
      }

Why is my clear button not working?

Answer 1

you can do that functionality like this:

HTML:

<textarea rows='14' id="value"> </textarea>
<button class="continue">CONTINUE</button>
<button class="clear">CLEAR</button>

JS:

const continueButton = document.querySelector('.continue');
const clearButton = document.querySelector('.clear');
const textArea = document.querySelector('#value');


continueButton.addEventListener('click', function(e) {
  textArea.value = 'hello'
  textArea.disabled = true

});

clearButton.addEventListener('click', function(e) {
  textArea.value = ''
  textArea.disabled = false
});

Answer 2

change setTimeout('clear()',1000) to setTimeout('clear',1000)