Question Details

No question body available.

Tags

javascript html input text

Answers (3)

June 8, 2026 Score: 4 Rep: 21,323 Quality: Medium Completeness: 50%

Both scripts define the same global variables/functions. When you load the second script, it smashes the definitions of the first script.

You need each to have different names.

var myStringDict1 = { ... }
function testMultipleStrings1() { ... }

and

var myStringDict2 = { ... }
function testMultipleStrings2() { ... }

That also means you need to change the oninput="...". If you have a single oninput="..." and still want to separate scripts, then you need a different approach. For example, you could add to the map instead of overwriting it in the second script. Here is how you could do it:

myStringDict["exampletwo"] = "example.org"
myStringDict["othertexttwo"] = "othersitehere"

And in that case you do not need to redefine the testMultipleStrings() function.

June 8, 2026 Score: 1 Rep: 81,838 Quality: Medium Completeness: 100%

When you load script1 and then you load script2, then, in case both of them define the same global variable/function, the second script to load will override the first's version of those resources. For example:

var foo = 2;
var bar = 3;

function foobar() { return foo + bar; }

var foo = 4; var bar = 3;

function foobar() { return foo * bar; }

console.log(foobar());

As you can see, foo and bar are initially defined as 2 and 3, respectively and foobar is defined as their sum, which would result in 5. However, then we override foo with the value of 4 and foobar to be the product between foo and bar. Since bar was 3 and foo was overriden to 4, their product is computed, resulting in 12.

If you had two scripts, the first defining foo and bar as well as foobar, then the second defining them as well, then loading the scripts execute them and will provide the same results.

This leads us to the conclusion that having multiple scripts being loaded, each of them defining the same global variables and functions is an antipattern which should be avoided precisely because of the confusion it creates. Instead, you are on the safe side if you separate these into one single definition and maybe append values when you need. You could change your script like

            //First script
            if (typeof myStringDict === "undefined") {
                var myStringDict = {};
            }
            myStringDict = {...myStringDict, ...{
                "exampleone" : "example.com",
                "othertext" : "othersitehere"
            }};

if (typeof testMultipleStrings === "undefined") { function testMultipleStrings() { let textBox = document.getElementById("textBox");

if (textBox.value.toLowerCase() in myStringDict) { //window.location.replace(myStringDict[textBox.value.toLowerCase()]); console.log("redirect to " + myStringDict[textBox.value.toLowerCase()]); } } } //Second script if (typeof myStringDict === "undefined") { var myStringDict = {}; } myStringDict = {...myStringDict, ...{ "exampletwo" : "example2.com", "othertext2" : "othersitehere2" }};

if (typeof testMultipleStrings === "undefined") { function testMultipleStrings() { let textBox = document.getElementById("textBox");

if (textBox.value.toLowerCase() in myStringDict) { //window.location.replace(myStringDict[textBox.value.toLowerCase()]); console.log("redirect to " + myStringDict[textBox.value.toLowerCase()]); } } } //Usage testMultipleStrings();

So if you cannot refactor your code to have a separate, reliable definition, then you can check whether the typeof your variable/function is undefined, in which case they were not defined yet and you need to define them.

So:

  • we check whether myStringDict was defined and if not, we initialize it as an empty object
  • whatever the result was, we merge this object with the new values we want to add, using the spread operator on both
  • if the function was not defined yet, then we define it

Yet, we need to put emphasis on the fact that your approach is an antipattern and the solution above should not be preferred. Instead, you would do well to refactor your code so the definition of your search terms will be okay and not confusing. The solution above is only for the case when you cannot vie for the refactoring, for reasons like the scripts are not in your control to change or something like that

June 8, 2026 Score: 0 Rep: 1 Quality: Low Completeness: 40%
const myInput = document.getElementById("myInput");

function firstScript() { console.log("First script executed!"); }

function secondScript() { console.log("Second script executed!"); }

// Attach both functions to the 'input' event myInput.addEventListener("input", firstScript); myInput.addEventListener("input", secondScript);