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

【问题标题】：Javascript/HTML - function replace letter in text area with variable value in input fieldJavascript/HTML - 函数用输入字段中的变量值替换文本区域中的字母
【发布时间】：2021-12-28 11:37:08
【问题描述】：

我正在尝试用变量字符串将“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;

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

【问题讨论】：

标签： javascript html function replace letter

【解决方案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;
}

【讨论】：