Replace part of a string with another string javascript

Question

what I have is 3 text boxes. The first one a user enters a string. The second box they enter part of the first string they want to replace. The third text box is the string that is to do the replacing.

I'm trying to use the replace() method but I dont think Im using it right or i should be using something else.

html:

        <form>
            Enter a string:<input type="text" id="user_string"><br>

            Enter portion of previous string to be replaced: <input type="text" id="replace_string"><br>

            Enter new string: <input type="text" id="add_string"><br>

            <input type="button" value="Execute" onclick="BaitAndSwitch()"><br>

            Result: <input type="text" id="req_4_results"><br>
        </form>

Javascript:

function BaitAndSwitch(){
    // create variables for the user entered data
    var UserString = document.getElementById("user_string").value;

    var ReplaceString = document.getElementById("replace_string").value;

    var AddString = document.getElementById("add_string").value;

    var Results = UserString.replace(ReplaceString, Addstring);

    if (UserString.indexOf(ReplaceString) > -1) {
        Document.getElementById("req_4_results").value = Results;
    }
    else{
        alert("Something went wrong! Please check the data you entered.")
    }
}

I know I'm doing something wrong. Maybe the use of variables in the .replace() method? Or maybe the if... using indexOf line?

I was essentially trying to set it up where it would check UserString with the value of ReplaceString and if it matched, it would then execute the replace() method and show results to the given HTML element. Else if the ReplaceString didn't match any thing from UserString, it would alert the user something was wrong and to check it.

Answer 1

JavaScript is cAsE SeNsItIvE. Please note that Document is not the same as the document object. Please use the below line:

document.getElementById("req_4_results").value = Results;

Oh and yes, as pointed out by blex , you have another typo too:

var Results = UserString.replace(ReplaceString, Addstring);
//-------------------------------------------------^ should be S

More Info: In the console, if you try both, see the result you get:

typeof Document
// "function"
typeof document
// "object"

On a side note, please do not use such Naming Conventions. Looks like you are migrating from Visual Basic.

Answer 2

Note that the replace() method does not modify the string that you call it on.

In your line of code:

var Results = UserString.replace(ReplaceString, Addstring);

The value of UserString will not changed as a result of having called replace() on it.

In your conditional statement:

UserString.indexOf(ReplaceString) > -1

If it is true, it means that UserString still contains at least one instance of ReplaceString within it.
That makes sense, because you wouldn't have modified UserString yet. If you want to make sure that Results no longer has any occurrence of ReplaceString , then you want to throw an error only if the following condition is true:

Results.indexOf(ReplaceString) > -1