Can I reduce this 3 functions to only one and create 3 distincts things?

May 19, 2022

These functions will create divs, and A, B, and C will have different left positions (as in the arrays) and different classes with different dimensions. Another function will call them in a set interval and will decrease all the "–bottom" with time at the same speed (they will move down ).
I have a feeling that these functions can be simplified to one, but I am new to javascript.

function getCustomProperty(elem,prop){
    return parseFloat(getComputedStyle(elem).getPropertyValue(prop)) || 0
}

function setCustomProperty(elem,prop,value){
    elem.style.setProperty(prop, value)
}

function incrementCustomProperty(elem,prop,inc){
    setCustomProperty(elem,prop, getCustomProperty(elem,prop)+inc)
}
const worldElem = document.querySelector("[data-world]")
function createA() {
    let posits = [15,45,75]
    let posit = posits[Math.floor(Math.random()*posits.length)]
    const A = document.createElement("div")
    A.dataset.A = true
    A.classList.add("A")
    worldElem.append(A)
    setCustomProperty(A, "--bottom", 100)
    setCustomProperty(A, "--left", posit)
}
function createB() {
    let posits = [11.5,23.5,41.5,53.5,71.5,83.5]
    let posit = posits[Math.floor(Math.random()*posits.length)]
    const B = document.createElement("div")
    B.dataset.B = true
    B.classList.add("B")
    worldElem.append(B)
    setCustomProperty(B, "--bottom", 100)
    setCustomProperty(B, "--left", posit)
}

function createC() {
    let posits = [14,23.5,44,53.5,74,83.5]
    let posit = posits[Math.floor(Math.random()*posits.length)]
    const C = document.createElement("div")
    C.dataset.C = true
    C.classList.add("C")
    worldElem.append(C)
    setCustomProperty(C, "--bottom", 100)
    setCustomProperty(C, "--left", posit)
}

>Solution :

There seem to be two varying values when comparing your three functions A, B, and C:

the id ("A", "B" or "C")
the posits array

So, you could pass that information as an argument to the function. Either as two separate arguments, or one object that combines that information.

For example:

function create(config) {
    let [[id, posits]] = Object.entries(config);
    let posit = posits[Math.floor(Math.random()*posits.length)];
    const div = document.createElement("div");
    div.dataset[id] = true;
    div.classList.add(id);
    worldElem.append(div);
    setCustomProperty(div, "--bottom", 100);
    setCustomProperty(div, "--left", posit);
}

var A = [15,45,75];
var B = [11.5,23.5,41.5,53.5,71.5,83.5];
var C = [14,23.5,44,53.5,74,83.5];

// Example calls:
create({A});
create({B});
create({C});