如何重复onClick文本输入功能？答案

【问题标题】：How do I repeat the onClick text input function?如何重复onClick文本输入功能？
【发布时间】：2019-12-18 04:11:53
【问题描述】：

我是 Javascript 新手。我正在尝试用文本输入字段中的输入替换单词“test”。该代码似乎是第一次替换文本，但我希望每次在文本字段中输入新值并按下按钮时都这样做。

       <p id="replacetext">
               1. Test </br>
               2. Test </br>
               3. Test </br>
       </p>
   <input id="myInput" type="text"/>
        
   <script>
            function onClick() {
                var replacetest =    document.getElementById("myInput").value;
                var str = document.getElementById("replacetext").innerHTML; 
                str = str.replace(/Test/g, replacetest);
                document.getElementById("replacetext").innerHTML = str;
                console.log(replacetext)
            }
        </script>
<button onclick="onClick()">Submit</button>
</body>

【问题讨论】：

标签： javascript replace onclick var

【解决方案1】：

这是因为您没有跟踪旧值（即您正在用输入值替换 Test 但下次没有“Test”字符串可供替换）试试这个小提琴https://jsfiddle.net/dzr8n9vh/

<p id="replacetext">
               1. Test </br>
               2. Test </br>
               3. Test </br>
       </p>
   <input id="myInput" type="text"/>
   <script>
            var oldValue  = 'Test';
            function onClick() {
                var replacetest =    document.getElementById("myInput").value;
                var str = document.getElementById("replacetext").innerHTML; 
                var re = new RegExp(oldValue,"g");
                oldValue =replacetest
                str = str.replace(re, replacetest);
                str = str.replace("Event", "Purchase");

                document.getElementById("replacetext").innerHTML = str;
            }
        </script>
<button onclick="onClick()">Submit</button>

【讨论】：

【解决方案2】：

查看您的脚本，您在第二次调用时继续替换字符串“Text”，即使它在第一次调用时已更改为输入值。

您需要做的是记住上一次调用结束时输入的值（prevValue 变量），然后将其替换为当前调用中新输入的值。由于不能只在正则表达式中使用变量，因此必须将其转换为正则表达式。

<p id="replacetext">
    1. Test </br>
    2. Test </br>
    3. Test </br>
</p>
<input id="myInput" type="text" /> 
<script>
    // Set scope of variable outside of function
    var prevValue = "Test"

    function onClick() {
        var replacetext = document.getElementById("myInput").value;
        var str = document.getElementById("replacetext").innerHTML;

        // Convert the variable to use it in the regular expression
        var regex = new RegExp(prevValue, 'g');
        str = str.replace(regex, replacetext);

        str = str.replace("Event", "Purchase");
        document.getElementById("replacetext").innerHTML = str;
        console.log(replacetext);

        // Update the previous variable
        prevValue = replacetext;
    }
</script>
<button onclick="onClick()">Submit</button>

希望这对你有用！

【讨论】：