Как я могу выбрать все классы в javaScript с одинаковым именем класса? - PullRequest
Новая
       16

Как я могу выбрать все классы в javaScript с одинаковым именем класса?

0 голосов
/ 29 марта 2020

Можете ли вы помочь мне с этим, чтобы решить? bg-color с 1-ым div только меняется, но остальное не работает, помогите мне решить эту проблему! 

const hexNum = [0,1,2,3,4,5,6,7,8,'A','B','C','D','E','F'];
const hexBtn = document.querySelector('.btn-hex');
const bgPale = document.querySelector('.bg-color');
const hexCode = document.querySelector('.color-code');

hexBtn.addEventListener('click', getNewHex);
function getNewHex(){
    let newHexCode = '#';
    for (let i = 0; i<6; i++){
        let randomHex = Math.floor(Math.random()*hexNum.length);
        newHexCode +=hexNum[randomHex];
        //console.log(newHexCode);
    }
    bgPale.style.backgroundColor = newHexCode;
    hexCode.innerHTML = newHexCode
}
<div class="bg-color palette-1"></div>
<div class="bg-color palette-2"></div>
<div class="bg-color palette-3"></div>

1 Ответ

2 голосов
/ 29 марта 2020

Проблема здесь в том, что вы используете document.querySelector('.bg-color'), который возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Вам нужно использовать здесь document.querySelectorAll('.bg-color') вместо этого, поскольку он возвращает NodeList, представляющий список элементов документа, которые соответствуют указанной группе селекторов. Затем вам также потребуется l oop через каждый узел, чтобы изменить стиль следующим образом: 

const bgPale = document.querySelectorAll('.bg-color')
bgPale.forEach(el => el.style.backgroundColor = newHexCode);

Для получения дополнительной информации:

...