javascript - textarea 没有读取我所做的输入

Question

因此，如果我在 textarea 中输入任何内容，无论我进行什么更改，它都不会从表单中读取任何内容。我需要它能够输入，而不仅仅是更改 textarea 的默认消息。如果我的代码中有任何其他错误，请通过纠正我来帮助我。而这只是纯粹的 html 和 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();">

标签： javascripthtml

Answer 1

尝试而value不是控制。innerHTMLtextarea

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
}

注意：demo在您的 JS 中使用的 HTML 中没有带有 id 的元素。

演示：

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();">