이 문제를 해결하도록 도와 주시겠습니까? 첫 번째 div의 bg-color 만 변경되지만 나머지는 작동하지 않습니다.이 문제를 해결하는 데 도움이됩니다!
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>여기서 문제 document.querySelector('.bg-color')는 지정된 선택기 또는 선택기 그룹과 일치하는 문서 내에서 첫 번째 요소를 반환하는 사용 하고 있다는 것 입니다. document.querySelectorAll('.bg-color')지정된 선택기 그룹과 일치하는 문서의 요소 목록을 나타내는 NodeList를 반환하므로 여기에서 실제로 사용해야합니다 . 그런 다음 스타일을 다음과 같이 변경하기 위해 각 노드를 반복해야합니다.
const bgPale = document.querySelectorAll('.bg-color')
bgPale.forEach(el => el.style.backgroundColor = newHexCode);
더 많은 정보를 위해서:
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다