Как мне сделать, чтобы определенные поля меняли цвет при нажатии на них?

Question

Я бы хотел изменить цвет более чем на одну коробку на фиолетовый при нажатии на нее. С моим текущим кодом ниже, только одна коробка окрашивается в фиолетовый цвет при нажатии на нее.

Я пробовал так много разных способов заставить его работать, когда вы нажимаете на любое количество ящиков, поле должно стать фиолетовым, но все мои попытки потерпели неудачу.

Что я делаю не так?

function createBoxesDynamically() {
    var tileLength = Math.floor(Math.random() * 11);
    console.log("tileLength " + tileLength);

    var box = new Array(tileLength);
    console.log("box" + box);

    for (var i = 0; i < box.length; i++) {
        box[i] = "box";
    }

    for (var j = 0; j < box.length; j++) {
        var div = document.createElement("div");
        div.id = "box";
        document.body.appendChild(div);
    }

    var boxes = document.querySelector("[id^=box]");

    boxes.addEventListener("click", function () {
        boxes.style.backgroundColor = "purple";
    });
}

createBoxesDynamically();

    #box {
        border: 1px solid;
        width: 50px;
        height: 50px;
        background-color: green;
    }

Answer 1

У вас не может быть нескольких элементов с одинаковыми значениями id, поэтому независимо от того, в каком поле вы щелкнете, первое всегда будет затронуто, ваш вызов .querySelector() перестанет искать первое совпадение.

Вместо этого переместите код, который устанавливает обработчик событий, внутри цикла, в котором создается блок, и просто используйте this в обратном вызове click, чтобы обратный вызов действовал на блок, который был выбран.Нет id необходимо.И поскольку вы не будете использовать id s, вам не нужен ваш массив или первый цикл.

В общем, держитесь подальше от решений для кодирования, которые полагаются на id s.Да, на первый взгляд они кажутся точными и простыми в использовании, но вы обнаружите (и уже знаете), что они создают очень хрупкие решения, которые не очень хорошо масштабируются.Помимо id.

существует множество других способов ссылаться и стилизовать элементы. Также следует избегать встроенного стиля элементов (установка стилей непосредственно в свойстве style), поскольку это обычно приводит к дублированию.кода и, следовательно, делает код более сложным для чтения и обслуживания.Используйте CSS классы как можно больше.

function createBoxesDynamically() {
    var tileLength = Math.floor(Math.random() * 11);
    console.log("tileLength " + tileLength);

    for (var j = 0; j < tileLength; j++) {
        var div = document.createElement("div");
        div.classList.add("box");  // Add the CSS class to the element
        div.addEventListener("click", function () {
          this.classList.add("clickColor");;
        });
        document.body.appendChild(div);
    }
}

createBoxesDynamically();

/* Use Classes instead of IDs */
.box {
        border: 1px solid;
        width: 50px;
        height: 50px;
        background-color: green;
}

.clickColor { background-color: #800080; }