We Keep Coding

Template Literals How To Make a ?Universal Rule?

I'm new to coding but I am using template literals in a project using css variables. this example sets all the variables in one shot inside a function. this is referring to inputs which all have an eventlistener on them.
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
I want to set another rule for a span to display the values. right now I am doing each one individually like this.
heightDisplay.innerHTML = height.value + 'px';
widthDisplay.innerHTML = width.value + 'px';
all the span's ids will be " this.name + 'Display' "
I want to right a rule that sets them all at once using the literals(similar to the rule that sets the variables) instead of writing 30 lines of code.
I can't figure out the syntax to add Display on there and i don't know where to put the back ticks.
I assume this is possible, since pretty much everything in Javascript is.
Thanks for your time.

I assume that you have an iteration where this Code-Line is Executed:document.documentElement.style.setProperty(--${this.name}, this.value + suffix);
In this Iteration you can set the Values of your spans like this:
var Span = document.querySelector(`[id*= ${this.name}]`);
Span.innerHTML = this.value+ "px";
Edit:
The querySelector - function gets a css-selector as a parameter. the [] - Brackets is a css selector that gets an element with an atribute (in this case id) and a value (this.name). The *= between them means, that you can select an element that has a substring in the value of the atribute.

send Javascript variable to .css({transform: translate (var,var)})

I wanted to move a div 136px to right with transform property so i wrote:
`
$(".the_div").css({"transform":"translate(136px,0px)"});
and the_div class contains
.the_div
{
transition-duration:2s;
}
and it worked but now i want to send a javascript variable instead of 136px.
is that possible? how can i do that?
a variable like
var my_width = window.innerwidth * 0.1;
i wrote
$(".the_div").css({"transform":"translate(my_width+'px',0px)"});
and it obviously didnt work.
do you have an idea to move a div One-tenth of screen width to right (using transform property)?

You can do this in pure Javascript as well using template strings.
(PS - you don't even need JQuery)
First, save the div in a variable
const theDiv = document.querySelector('.the_div');
Second, save the value you want to translate in a variable
let number = 136;
Lastly, set the style attribute of the div
theDiv.style.transform = `tranlate(${number}px,0)`;
Hope this helps answer your question
Here is a helpful link for template strings
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

simply you just need concatenate variable in string in javascript " + my_width + "
$(".the_div").css({"transform":"translate(" + my_width + "px,0px)"});

Why isn't my JavaScript variable working?

This works:
$('.sameDiv').css('width', '25%');
But this doesn't:
var squaresize = 25;
$('.sameDiv').css('width', 'squaresize%');
Also, I've tried it with the percent symbol as part of the variable and that doesn't help.

$('.sameDiv').css('width', 'squaresize%');
Should become
$('.sameDiv').css('width', squaresize + '%');
I did not test it, but if you just put 'squaresize%' it will not try to reference it... rather, just read it directly as a literal string evaluating to "squaresize%" instead of 25%

Your code should be like:
var squaresize = 25;
$(".sameDiv").css('width', squaresize+'%');
Your variable name is "squaresize". Knowing that when adding a string to an integer will produce a string as well, there is no need to convert your integer to a string. Just add the "%" to your variable value.
Using a single quote, you are setting css to value 'square%' as a static value.

How to get the width of an Image and use the value as height to make the image fairly square

I'm using the following code to get the width of an image who's width is in percentages. So i get the width in pixels which is what i want, but i can't seem to get the syntax of putting the variable inside the CCS property value with JavaScript.
This is my problem
$("#ProPhotosID").css("height", '' + height + '')
as seen in full here.
var img = document.getElementById("ProPhotosID");
var height = img.clientHeight;
$("#ProPhotosID").css("height", '' + height + '')
Thanks.

It's not necessary quote ' you only need to put the variable.
After you need to be secure that img.clientHeight is a real value.
Try this:
$("#ProPhotosID").css("height", height);

That's all you need:
$('#ProPhotosID').css('height', $('#ProPhotosID').css('width'));

There is no need to wrap the variable with '. You can just put the variable.
Do something like this:
$("#ProPhotosID").css("height",height)
Or the simpler is just use height() instead of css('heght', ):
$('#ProPhotosID').height(height);

Accessing Variables in Javascript using .length

I'm pretty new to Javascript, so forgive me if this is a simple question.
I'm trying to access the length of a set of checkboxes in a form using Javascript. However, I need to be able to change the "name" field of the checkboxes to check several different sets of them. Right now, my sample code looks like:
var set = "set" + x;
totalLength = optionBoxes.set.length;
The variable x is being incremented by a for loop that wraps the whole thing and the name of the checkbox sets that I'm trying to access are set0, set1, set2, etc.
Thanks.
Edit: small typo fixes

Probably you want this:
var set = "set" + x;
totalLength = optionBoxes[set].length;
In Javascript, properties of an object are usually accessed as object.name, but they can also be accessed by object["name"] if you have the name as a string.

if you think that your code should otherwise work try:
totalLength = optionBoxes[set].length;