i'm trying to replace the "a" letter by a variable string into input field "INPUT1". So i would like, when i write a sentence in "textarea_up", it replace in "textarea_down" the letter a by input field (INPUT1) value.

Here is the code :

<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>

If i put this line it's work but i can't change my value anymore.

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

In fact i would like that but it doesnt't work :

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

CodePudding user response：

Refreshcool is wrongly written.

You should update the replacing string before modifying the text with it.

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

should be

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

Javascript is not passing VarTest as a reference, therefore modifying it inside RefreshCool won't change MapObj:

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