Swapping hardcoded arguments for variables

Question

I've got a functional script on my site that allows me to open a link in a new window when a specific class is added to the link. I need a lot of those on my site though so I figured I'd make the script a bit easier to edit by working with variables.

In the process of changing out hardcoded strings for variables my script stopped working though. The only one that works is the var where I set the url.

I'm learning that ${} doesn't work everywhere. Hope that someone can point out where my thinking is wrong. Also hope that I got the terminology right, trying to learn though! :-)

 
var function1Name  = "test_function";
var function1Url  = "https://www.google.com"; 
var function1Class  = ".test_function_class"; 
 

function ${function1Name}() {
    window.open(function1Url, "_blank", "height=200");
}

jQuery("${function1Class}").click(function(){
 ${function1Name}()
});
  

Answer 1

None of your uses of ${} are valid JavaScript syntax.

Your function declaration van be replaced with:

window[function1Name] = function () {
    window.open(function1Url, "_blank", "height=200");
}

Please note that the function will no longer be hoisted when declared this way, so order of operation matters.

The click handler can be written as follows:

jQuery(function1Class).click(function() { // Note that I just used the variable there.
    window[function1Name]();
});

There is a ${} concept in JavaScript, but that is only in template literals:

const myVariable = "Foo";
const message = `myVariable contains: "${myVariable}"!`;
console.log(message);

Answer 2

There's several syntax issues here.

Firstly, function ${function1Name}() is not valid syntax. Function names must be defined before runtime. If you want to dynamically access a function, place it in an object and set the key with the variable reference.

Secondly, ${function1Name}() is again not valid syntax. You cannot invoke a function like that dynamically. Referring to the suggestion above, you can access an object dynamically so the first point fixes this problem.

Thirdly, string interpolation only works within template literals, so you need to delimit the string with backticks: ``. However it's completely redundant here as you can just use $(function1Class)

With those issues in mind, here's an updated example:

var function1Name = "test_function";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class";

var funcObj = {
  [function1Name]: function() {
    console.log(`function called, window would open here containing ${function1Url}...`);
    // window.open(function1Url, "_blank", "height=200");
  }
}

$(function1Class).click(function() {
  funcObj[function1Name]()
});

/*
alternative using a template literal, although note that it's redundant here
$(`${function1Class}`).click(function() {
  funcObj[function1Name]()
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="test_function_class">Click me</a>

One last thing to note is that no version of IE supports template literals, so be sure of your browser support requirements before using them.

Answer 3

So cool, I got it to work!

var function1Name  = "test_function_1";
var function1Url  = "https://www.google.com"; 
var function1Class  = ".test_function_class1"; 

var function2Name  = "test_function_2";
var function2Url  = "https://www.cnn.com"; 
var function2Class  = ".test_function_class2"; 



// Function 1 
window[function1Name] = function () {
    window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function1Class).click(function() { 
    window[function1Name]();
});


// Function 2 
window[function2Name] = function () {
    window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function2Class).click(function() { 
    window[function2Name]();
});

I can now add a bunch of url's and corresponding classes as was my intention. Super happy about that.

A follow up question though, as I'll have to experiment with what the ideal window parameters will be I'm trying to make those arguments variables as well. I've tried the examples of how to insert a variables output from the functional code but those methods don't work there. Here's that code:

var windowWidth   = 250 
 
var function1Name  = "test_function_1";
var function1Url  = "https://www.google.com"; 
var function1Class  = ".test_function_class1"; 

var function2Name  = "test_function_2";
var function2Url  = "https://www.cnn.com"; 
var function2Class  = ".test_function_class2"; 



// Function 1 
window[function1Name] = function () {
    window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=[windowWidth],height=745");
}

jQuery(function1Class).click(function() { 
    window[function1Name]();
});


// Function 2 
window[function2Name] = function () {
    window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function2Class).click(function() { 
    window[function2Name]();
});

How would I insert the variables value (2nd line of Function1) there ?