javaScript and HTML-Textarea Text not erasing [duplicate]

Question

Html file with JavaScript functions

<html>
<head>
<title>Voice to Text</title>
<script>
function erasText(){
            document.getElementById("name").innerHTML = "";
            }
            
    </script>
</head>
<body>
<form>
<label>Enter Text: </label>
<textarea placeholder="Enter text here for detection." id="name" name="name" class="result" >
</textarea>
</form>
<div class="options" style="display:none">
        <div class="anguage" >
          <p>Language</p>
          <select name="input-language" id="language"></select>
        </div>
      </div>
      <button class="btn record" id='myid'>
        <p><b>  Start Listening</b></p>
      </button>
      <div style="margin-top:-50px;" class="buttons">
        <button class="btn clear" id='clr' style="margin-left:150px" onClick="erasText()">
          <b>Clear</b>
        </button>
</div>
        


<script>
myid.addEventListener('click',function(){
    var speech = true;
    window.SpeechRecognition = window.webkitSpeechRecognition;

    const recognition = new SpeechRecognition();
    recognition.interimResults = true;

    recognition.addEventListener('result', e => {
        const transcript = Array.from(e.results)
            .map(result => result[0])
            .map(result => result.transcript)
            .join('')

        document.getElementById("name").innerHTML = transcript;
        console.log(transcript);
    });
    
    if (speech == true) {
        recognition.start();
    }
})


clr.addEventListener("click", () => {
  document.getElementById("name").innerHTML = "";
})
</script>
</body>
</html>

When i click on clear button than the text on textarea is not erasing and when i press 'Start Listening' than this button works. i think 'erasText' function is not calling and only the following function is calling in the above code:

clr.addEventListener("click", () => {
      document.getElementById("name").innerHTML = "";
    })

I called erasText function on button click but i do not know why the erasText button is not calling. Is there a way to call this function?

textarea is an input so do it like this document.getElementById("name").value = "" — Chris G
– Chris G, Commented Feb 13, 2023 at 12:51

Oreoezi · Accepted Answer · 2023-02-13 12:54:40Z

1

The field you are actually looking for is value instead of innerText.

clr.addEventListener("click", () => {
      document.getElementById("name").value = "";
});

answered Feb 13, 2023 at 12:54

Oreoezi

1291 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javaScript and HTML-Textarea Text not erasing [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related