How to replace output textbox in html5?

Question

Hopefully someone can help me.

when im input: "my name is jack".

Ouputput can display change: "my name is clara".

jack change with clara.

but when im input: "my name is toni"

Ouputput still display: "my name is toni"

that text "toni" can't change with "ana"

what's wrong with my code?, this my code

<html>
<body>

Enter Text: <input type="text" id="myText">
<button onclick="myFunction()">Replace</button>

<p id="check"></p>

<script>
function myFunction() {
    var x = document.getElementById("myText").value;
	var y = x.replace("toni", "ana");
	document.getElementById("check").innerHTML = y;
	var z = x.replace("jack", "clara");
	document.getElementById("check").innerHTML = z;
	}
	
</script>
</body>
</html>

sorry for my bad english

Thankyou...

The problem is that you are performing two replaces in a row and the last one overwrite the result of the first. What do you want to do if the string contains both toni and jack? Should only one of them be replaced (with what priority order?) or both? — Margaret Bloom
– Margaret Bloom, Commented Mar 12, 2016 at 14:26

mitkosoft · Accepted Answer · 2016-03-12 14:28:05Z

You can create your own function, to define original and new names into arrays and match them:

<html>
    <body>
        Enter Text: <input type="text" id="myText">
        <button onclick="myFunction()">Replace</button>
        <p id="check"></p>

        <script>
            String.prototype.replaceArr = function(find, replace) {
                var replaceString = this;
                var regex;
                for (var i = 0; i < find.length; i++) {
                    regex = new RegExp(find[i], "g");
                    replaceString = replaceString.replace(regex, replace[i]);
                }
                return replaceString;
            }

            function myFunction() {
                var x = document.getElementById("myText").value;
                var oldNames = ['toni', 'jack'];
                var newNames = ['ana', 'clara'];
                document.getElementById("check").innerHTML = x.replaceArr(oldNames, newNames);
            }
        </script>
    </body>
</html>

Daniel Beck · Accepted Answer · 2016-03-12 14:34:13Z

1

Let's take this line by line:

var x = document.getElementById("myText").value;

X now contains the original text value, with no replacements.

var y = x.replace("toni", "ana");

Y contains the original text value with "toni" replaced by "ana".

document.getElementById("check").innerHTML = y;

You place Y inside the document.

var z = x.replace("jack", "clara");

That was the bug. Z contains the original text value with "jack" replaced by "clara". Note that this ignores the replacement you did in Y.

document.getElementById("check").innerHTML = z;

Now you place Z inside the document (overwriting the change you made earlier).

A simple way to resolve your issue without substantially rewriting your code would be to drop all the unnecessary intermediate variables, and do all the replacements on the same string before placing it back in the DOM:

var x = document.getElementById("myText").value;
x = x.replace("toni", "ana");
x = x.replace("jack", "clara");
document.getElementById("check").innerHTML = x;

answered Mar 12, 2016 at 14:34

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

1 Comment

jack.D Over a year ago

thanks for replaying.. im a student and beginer with javascript. thankyou so much for explaining my wrong code. :)

Collectives™ on Stack Overflow

How to replace output textbox in html5?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related