Javascript/HTML - 函数用输入字段中的变量值替换文本区域中的字母

Question

我正在尝试将“a”字母替换为输入字段“INPUT1”中的可变字符串。所以我想，当我在“textarea_up”中写一个句子时，它会用输入字段 (INPUT1) 值替换“textarea_down”中的字母 a。

这是代码：

<textarea id="textarea_up"onkeyup="GetValue(); FunReplace();; Refreshcool();" type="text" name="filter_name" value="" rows="10" cols="75" ></textarea>

<textarea id="textarea_down" type="text" value="" rows="10" cols="75" readonly></textarea> 
<br>
<br>
a = <input type="text" onkeyup="RefreshCool()" id="INPUT1" name="name" required minlength="4" maxlength="8" size="10">
<p id="ShowText"></p>
<script>
    function GetValue() {
        field_up = document.getElementById("textarea_up");
        field_down = document.getElementById("textarea_down");
        document.getElementById("textarea_down").innerHTML = field_up.value;
    }
    
//document.getElementById("INPUT1").value = "test";
//document.getElementById("INPUT1").value = INPUT1.value;
    
    function RefreshCool() {
        document.getElementById("ShowText").innerHTML = INPUT1.value;
        VarTest = INPUT1.value;
    }
    VarTest = INPUT1.value;
    MapObj = {
            a: VarTest,
            b: "beet",
        };  
    
    function FunReplace() {
            VarChaine = field_up.value;
            VarRemp = new RegExp(Object.keys(MapObj).join("|"), "g");
            field_down.innerHTML = VarChaine.replace(VarRemp, function(matched) {
                return MapObj[matched];
            });
        }
</script>

如果我输入这条线，它就可以工作，但我不能再更改我的值了。

document.getElementById("INPUT1").value = "test";

事实上，我很想那样做，但行不通:

document.getElementById("INPUT1").value = INPUT1.value;

我错过了什么？
预先感谢您的帮助

Answer 1

Refreshcool写错了

您应该先更新替换字符串，然后再用它修改文本。

<textarea id="textarea_up"onkeyup="GetValue(); FunReplace();; Refreshcool();" type="text" name="filter_name" value="" rows="10" cols="75" ></textarea>

应该是

<textarea id="textarea_up"onkeyup="GetValue(); RefreshCool(); FunReplace();" type="text" name="filter_name" value="" rows="10" cols="75" ></textarea>

Javascript 没有将 VarTest 作为参考传递，因此在 RefreshCool 中修改它不会改变 MapObj:

function RefreshCool() {
    document.getElementById("ShowText").innerHTML = INPUT1.value;
    MapObj.a = INPUT1.value;
}

Javascript/HTML - 函数用输入字段中的变量值替换文本区域中的字母

Javascript/HTML - function replace letter in text area with variable value in input field

html

javascript

replace

function

letter