We Keep Coding

Assign a value from getBoundingClientRect

I was trying this code from W3Schools and modified it to assign the resulted LEFT value to another element (DIV)
getBoundingClientRect example
Nothing happens even if the left value 8 is correctly recovered ! Any idea on how i am trying this assigning wrong !
Thanks

To directly assign CSS you need to pass a valid value more on MDN to it. So it needs to have e.g. "px" or "%" at it.
In short, it would work like that:
document.getElementById("aaa").style.left = x + "px";

You want to add: + "px"
Therefore change the following line:
document.getElementById("aaa").style.left = x;
to:
document.getElementById("aaa").style.left = x + "px";

How to make client side script variable dynamic within a repeat

I am trying to output som script using SSJS from a computedField like so:
var outScript = "<script>var data = " + datad.toString() + ";</script>"
The problem I have is that the computedField is within a doccollection repeat so I need to make the variable dynamic because I later need to access only the variable from the current entry using client side javascript (also within repeat)
How do I write to make the "data" variable dynamic within my repeat?
I know can create the variable using noteid or index, but I need to know how to write to output the variable i.e data1, data2 etc.
Hope you understand, a bit complicated to explain.
problably an easy answer I havn't thought of
thanks
Thomas

You could use the repeat's indexVar to save the data with a distinct key for each repeat entry:
var outScript = "<script>window.data_myRepeat_" + iRepeat.toFixed(0) + " = " + datad.toString() + ";</script>"
Here, it is assumed that the repeat's ID is "myRepeat" and indexVar is "iRepeat".

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.

Changing javascript code with javascript

Yeah this might look crazy but I just want to know if this is possible or not. I have something like this:
$('button').click(function(){
if(variable == 10){
$('img').attr('src','img/image.jpg');
} else {
$('img').attr('src','img/image-2.jpg');
}
});
Now, the problem is I have more than 2 photos (I have 10 categories of 2 photos each) but I don't want to create 10 variables and copy that block of code 10 times. So I wondered if you can make something like changing that 'img/image...jpg' part with another javascript command or so.

One solution is to use the variable as part of the image name, e.g.
$('img').attr('src','img/image-' + variable + '.jpg');

It depends on the names of your images - if you control the names, then you can make them work better with dynamic variables using a concept called string concatenation:
var num = 2;
$('img').attr('src', 'img/image-' + num + '.jpg');
This code will render img/image-2.jpg. If you change the num variable, the image source will change accordingly.

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;