Develop Reference

How to use wp_localize_script() variable in js as a variable? (not as string)

I've added a field to our wordpress backend where I can write text into it.
(for example "colorVariation + btnVariation) -> That should define a specifc order for the js variables later
I'm able to receive this text in my js file with the wp_localize_script function.
wp_localize_script('wc-product-js', 'script_vars', array(
'order' => get_field("wc_variation_order"),
)
);
It seems to be, that this variable get's converted into a string when I try to use the variable in my js file. like that:
var colorVariation = '_red';
var btnVariation = '_male';
var order = script_vars.order;
var varId = '.variation' + order;
My expected output would be ".variation_red_male" but the output is ".variationcolorVariation + btnVariation)
Is there any way to convert this string?

Alright. Finally I've found the function by myself. It's eval().
The eval() function is able to evaluate or executes an argument that
is passed inside it. If the argument is an expression, this function
will evaluate the expression and the argument is one or more
JavaScript statements, eval() executes the statements.
Quote from https://www.codespeedy.com/convert-string-into-variable-name-in-javascript/
var colorVariation = '_red';
var btnVariation = '_male';
var order = script_vars.order;
var varId = '.variation' + eval(order);

Using a variable as a classname

I am trying to put a class name stored in a variable into my JQuery where I want the class to be, this should change which class is affected depending on the parameter passed through the URL query string.
I have built the class name and stored it in the 'param' variable as below.
var param = '".' + "proj" + location.search.substring(6) + '"';
$(param).css('display', 'inline');
And want to change the css on the class inside of it but this does not seem to work for me. Perhaps because it tries to change the css of the variable rather than what is inside of it.
If not how can I solve this or if so, is there a better way I could go about this?

You're confusing a string literal to be only enclosed by double quotes ", while that is not the case. Remove them
var param = '.' + "proj" + location.search.substring(6);

Set the param variable as the location substring (assuming that this substring is correctly getting the desired result from your URL) - then use that in the jQuery by joining with the common portion as follows.
var param = location.search.substring(6);
$('.proj' + param).css('display', 'inline');
You will need to ensure that a) you have the jQuery library and b) you have the jquery code wrapped in a $(document).ready(function(){}) wrapper.
Also - its usually better to add / remove a class rather than directly affecting the CSS in the jquery
var param = location.search.substring(6);
$('.proj' + param).addClass('displayInline');
//CSS
.displayInline{display: inline}

Creating a JavaScript global array with static elements?

Creating a JavaScript global array with static elements?

The problem isn't that removeFunction doesn't have access to bigArray. The problem is in your onclick attribute, and the id you're putting on the link:
$('#div').append("<a href='#' id='bigArray[i]' onclick='removeFunction(bigArray[i])'>Element bigArray[i]</a><br />");
In the onclick, you're referring to i, but A) I'm guessing i isn't a global, and B) Even if it is, it will not have the value of i that you used to render that row. The code will look for the value of a global i variable as of when the link is clicked.
Separately, you're creating multiple elements with the same id value, which is bigArray[i] (not bigArray[0], bigArray[1], etc.)
You could use the value instead, like this:
$('#div').append("<a href='#' id='bigArray[" + i + "]' onclick='removeFunction(" + i + ")'>Element bigArray[i]</a><br />");
The changes there are:
For the id, I changed it to: "...id='bigArray[" + i + "]'", which will output id='bigArray[0]', then id='bigArray[1]', etc., instead of repeatedly outputting id='bigArray[i]' (literally.
I just pass the index into removeFunction, again by putting the value there, not a reference to the variable i: "... onclick='removeFunction(" + i + ")' ..."
Then your removeFunction would be:
function removeFunction(i) { // <== i, not id
bigArray.splice(i, 1); // <== real code, not pseudocode
renderArray(bigArray);
}
I would not recommend doing it that way, but it's the minimal fix.
There's no need to pass bigArray to anything. It's a global.
FWIW, I would recommend refactoring so you don't have to re-render the whole thing every time.

Define a variable at the global scope first that will hold your "bigArray", then assign the value to it once you receive the data through your ajax call.
var bigArray;
$.ajax({
bigArray = bigArrayFromAjax;
renderArray(bigArray);
});
... then your other functions should have access to it.

set global var using jquery and dynamic variable name

I am trying to set a javascript global var using jquery and dynamic variable names like this:
var home_phone_number // located outside of any functions
.
.
.
function setPhoneVars(phone){
// do stuff here to determine the correct prefix
thePrefix = 'home_phone_'
$(thePrefix + "number").val(phone.number);
}
When I do this, the value of home_phone_number is undefined.
But, when I set the phone number manually, like this:
home_phone_number = phone.number
the variable is set as expected.

Global variables are properties of the window object, so can be accessed as such:
window[thePrefix+'number'] = phone.number;

You can access global variables through window object, e.g.
var home_phone_number = "value";
function setPhoneVars(phone) {
var thePrefix = "home_phone_";
window[thePrefix + "number"] = phone.number;
}

Instead of having such many globals.. you can use a single object..
var globals = {
home_phone_number: 0 // located outside of any functions
}
function setPhoneVars(phone){
// do stuff here to determine the correct prefix
thePrefix = 'home_phone_'
globals[thePrefix + "number"] = phone.number;
}

I think your use of JQuery is not appropriate; .val() is intended to set the value of HTML elements, i.e. HTML objects in the DOM.
To simply set a dynamic JavaScript variable you could use eval() which is a JavaScript function which treats a string as executable code;
thePrefix = "home_phone_";
eval(thePrefix + "number = phone.number;");

Use variable in new variable

I'm trying to add a variable within a new variable.
My first variable is:
var video5 = myObj.find('hosted-video-url').text(); (this returns a direct link to an mp4-file)
My second one should be something like:
var playvid5 = "playVideo('"video5"')";
Variable playvid5 should result "playVideo('http://link.to/video.mp4)')"
When I try to make variable playvid5 in the way I showed above, my whole code stops working and nothing is displayed. When I use var playvid5 = "playVideo('"+video5+"')";, the output is "playVideo('')", so that's not what I need either.
I'm trying to place the 2nd variable in this piece: ('Bekijk video')
In what way can I place the first variable in the second one?

Try to replace video5 string by its value.
var video5 = myObj.find('hosted-video-url').text();
var playvid5 = "playVideo('video5')";
playvid5 = playvid5.replace("video5", video5);

Why not just give the <a> tag an "id" value, drop it in the document, and then do:
$('#whatever').click(function() { playVideo( video5 ); });
Now, where you go to find the value, I don't think you've got the correct selector. Probably you need
var video5 = myObj.find('.hosted-video-url').text();
The "." before the string "hosted-video-url" is to select by class name. If "hosted-video-url" is an "id" and not a class, then you don't need to use .find(); you can select by "id" with $('#hosted-video-url').

Do you mean
var playvid5 = "playVideo('" + video5 + "')";
playvid5 will then be the string "playVideo('http://whatevervideo5is')
if video5 is blank then you will get "playVideo('')" so maybe that is the issue.