textarea isn't reading input that I have made

Question

So no matter what I change if I input anything in the textarea it is not reading anything from the form. I needed it to be able to have input and not just change the default message of the textarea. If there is any other error in my code please help me by correcting me. And this is only purely html and javascript.

function manage(txt) {
        var input = document.getElementById('replace');
        if (txt.value != '') {
            input.disabled = false;
        }
        
        else {
            input.disabled = true;
        }
    }
    
    function findReplace() {
        var str = document.getElementById("message").innerHTML;
        var find = document.getElementById("find").value;
        var replace = document.getElementById("replace").value;
        var res = str.replaceAll(find, replace);
        document.getElementById("message").innerHTML = res;
    }
    
    function Counter(str) {
        var str = document.getElementById("message").innerHTML;
        var msg = str.split(" ");
        var element = document.getElementById("replace").value;
        
    var count = 0;
        for ( var i = 0; i < msg.length; i++)
        {
            if (element == msg[i])
            {
                count++;
                i++;
            }   else
            {
                i++;
            }
            
            document.getElementById("demo").innerHTML = "Number of replacement: " + count; 
        }
        
    }

 <!-- Message -->
  <label for="message">Message: </label><br>
  <textarea required type = "text" id="message" name = "message" rows="3" cols="20"  method = "post">Hello testing</textarea><br>
  
  <!-- Finding box -->
  <label for="find">Find: </label><br>
  <input type="text" id="find" name="find" onkeyup = "manage(this)"><br>
  
  <!-- Replace box -->
  <label for="replace">Replace with: </label><br>
  <input disabled type="text" id="replace" name="replace">
  
  <!--Submit button -->
  <input type="button" value="find and replace" onclick ="findReplace(); Counter();">

Also, use `value`, not `innerHTML`, to get/set the value of a `textarea` field. — T.J. Crowder, May 02 '21 at 07:45

score -1 · Accepted Answer · answered May 02 '21 at 07:43

Try value instead of innerHTML for textarea control.

function findReplace() {
    var str = document.getElementById("message").value; //use value here
    console.log(str)
    var find = document.getElementById("find").value;
    var replace = document.getElementById("replace").value;
    var res = str.replaceAll(find, replace);
    document.getElementById("message").value = res; //use value here
}

Note: There is no element with id demo in the HTML which is used in your JS.

Demo:

function manage(txt) {
        var input = document.getElementById('replace');
        if (txt.value != '') {
            input.disabled = false;
        }
        
        else {
            input.disabled = true;
        }
    }
    
    function findReplace() {
        var str = document.getElementById("message").value;
        console.log(str)
        var find = document.getElementById("find").value;
        var replace = document.getElementById("replace").value;
        var res = str.replaceAll(find, replace);
        document.getElementById("message").value = res;
    }
    
    function Counter(str) {
        var str = document.getElementById("message").innerHTML;
        var msg = str.split(" ");
        var element = document.getElementById("replace").value;
        
    var count = 0;
        for ( var i = 0; i < msg.length; i++)
        {
            if (element == msg[i])
            {
                count++;
                i++;
            }   else
            {
                i++;
            }
            
            //document.getElementById("demo").innerHTML = "Number of replacement: " + count; 
        }
        
    }

<!-- Message -->
  <label for="message">Message: </label><br>
  <textarea required type = "text" id="message" name = "message" rows="3" cols="20"  method = "post">Hello testing</textarea><br>
  
  <!-- Finding box -->
  <label for="find">Find: </label><br>
  <input type="text" id="find" name="find" onkeyup = "manage(this)"><br>
  
  <!-- Replace box -->
  <label for="replace">Replace with: </label><br>
  <input disabled type="text" id="replace" name="replace">
  
  <!--Submit button -->
  <input type="button" value="find and replace" onclick ="findReplace(); Counter();">

textarea isn't reading input that I have made

1 Answers1