如何重复onClick文本输入功能?

时间:2019-08-11 01:00:55

标签: javascript replace onclick var

我是Java的新手。我试图用文本输入字段中的输入替换“ 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>

2 个答案:

答案 0 :(得分:0)

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

class Board(Widget):
    # default values for `row` and `cols`
    col = NumericProperty(1)
    rows = NumericProperty(1)

    def __init__(self, **kwargs):
        super(Board, self).__init__(**kwargs)

答案 1 :(得分:0)

查看您的脚本,即使在第一次调用时已经将字符串“ 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>

希望这对您有用!