How to change style of multiple div on click of a button-CodePudding

I need to change style of multiple divs on click of a button that have the same name.I have the button where I create div with image.

This is code for creating the div

function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;

var img = $('<img  src="indeksiraj-1.png" alt="myimage" />');

$(divMark).append(img);
$(marksCanvas).append(divMark);
}

When I create div I can drag that div on browser.Now I need to change the style of div but when I create two div or more when I press the button I change style just of the last div other div stay the same.

This is code for everything:

var xCord;
var yCord;
var xLeft = 0;
var yTop = 0;

function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;

var img = $('<img  src="indeksiraj-1.png" alt="myimage" />');

$(divMark).append(img);

window.onload = addListeners();

function addListeners() {
    divMark.addEventListener("mousedown", mouseDown, false);
    window.addEventListener("mouseup", mouseUp, false);
}

function mouseUp() {
    window.removeEventListener("mousemove", divMove, true);
}

function mouseDown(e) {
    window.addEventListener("mousemove", divMove, true);
}

function divMove(e) {
    xCord = e.pageX;
    yCord = e.pageY;
    divMark.style.top = yCord   "px";
    divMark.style.left = xCord   "px";
}

zoomIn.onclick = function () {
    var myImg = document.getElementById("the-canvas");
    var currWidth = myImg.clientWidth;

    if (currWidth == 1200) return false;
    else {
        myImg.style.width = currWidth   100   "px";
    }

    xLeft  = xCord   25;
    yTop  = yCord   22;

    divMark.style.left = xLeft   "px";
    divMark.style.top = yTop   "px";

    xLeft -= xCord;
    yTop -= yCord;
};

zoomOutBtn.onclick = function () {
    var myImg = document.getElementById("the-canvas");
    var currWidth = myImg.clientWidth;
    if (currWidth == 800) return false;
    else {
        myImg.style.width = currWidth - 100   "px";
    }
    xLeft  = xCord - 25;
    yTop  = yCord - 22;

    divMark.style.left = xLeft   "px";
    divMark.style.top = yTop   "px";

    xLeft -= xCord;
    yTop -= yCord;
};
}

This is demo https://jsfiddle.net/SutonJ/5gyqexhj/18/

CodePudding user response：

You should use document.getElementsByClassName('<name of class>')

That way all the divs with the class name will be affected by the event.

CodePudding user response：

When you are referring to divmark at the movediv function you are referring to the last div you made. Instead you should refer to a class of that div since all of the divs you made have the same classes if I understand correctly. So you can use jquery to add the style to the class like so:

$('.markers').css({'top': yCord   "px", 'left': xCord   "px"})

That will add the styling to all the elements that have the class markers. If you have other elements with that class that you do not want to have those styles then you should add a unique class for those divs you made at divmark.classList.