CODEWITHSUNDEEP
javascripthtmlcssarrays
user17431483
user17431483

Reputation:

How to give values from array as style to the div

I have bunch of numbers in an array and also I have the same amount div.Now I need to first value from array to gave first div and so on.

var xList = [265, 152, 364]
var yList = [125, 452, 215]

And every div have the same class name

function creatContent(e) {
    var divMark = document.createElement("div");
    divMark.classList = `markers mark`;
    var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');
    $(divMark).append(img);
}

How to first value gave to first div second to the second div and so on.

And I was thinking about using css like this.

$(".markers").css({ top: yList + "px", left: xList + "px" });

Upvotes: 0

Views: 64

Answers (1)

SEoF
SEoF

Reputation: 1114

Firstly, it appears you are mixing raw JS with JQuery. It is recommended that you avoid JQuery these days as the raw JS methods are just as simple, but significantly quicker, and they have been usable for the last 4 years - that is to say in all the browsers still supported by their manufacturers. I have therefore changed all JQuery bits from your question with raw JS bits in my answer.

Basic answer

Now, the correct way to do what you're asking is to perform that inside of your function. For example:

function createContent(xPos, yPos) {
    var divMark = document.createElement('div');
    divMark.classList = 'markers mark';
    divMark.style.top = yPos + 'px';
    divMark.style.left = xPos + 'px';

    var img = document.createElement('img');
    img.classList = 'comment';
    img.src = 'indeksiraj-1.png';
    img.alt = 'myimage';

    divMark.appendChild(img);
}

Then you'll need to loop over the arrays to call the function.

for (var i = 0; i < xList.length && i < yList.length; i++) {
    createContent(xList[i], yList[i]);
}

Further consideration

As a consideration, you could use a single array for the xList and yList, which would allow you to change your loop to something more readable

var posList = [
    {x: 265, y: 125},
    {x: 152, y: 452},
    {x: 364, y: 215},
];

posList.forEach(({x, y}) => {
    createContent(x, y);
});

Without changing function signature

Having now seen more context via your fiddle, I can see the createContent function is called from a button click, and does far more than you have included. I have kept my change to remove the JQuery bit from your snippet, and put in a placeholder for you to put in the rest of the functionality in the createContent function.

function createContent(e) {
    var divMark = document.createElement('div');
    divMark.classList = 'markers mark';

    var img = document.createElement('img');
    img.classList = 'comment';
    img.src = 'indeksiraj-1.png';
    img.alt = 'myimage';

    divMark.appendChild(img);

    // ...put the rest of the code in the funtion here

    return divMark;
}

for (var i = 0; i < xList.length && i < yList.length; i++) {
    var mark = createContent();

    mark.style.top = yList[i] + 'px';
    mark.style.left = xList[i] + 'px';
}

Upvotes: 2

Related Questions