I don't know why this code doesn't work,
first, If I click button, it doesn't work.
two, if I check container-color, console.log says it is rgb(255, 0, 0)
but this code, console.log(1+ ' ' +container.style.backgroundColor); says 1 only
three, return value rndcol is undefined... why??
// 여기에 코드를 작성해주세요
let container = document.querySelector('#container');
const btn = document.querySelector('button');
function random() {
console.log(1,container.style.backgroundColor);
if (container.style.backgroundColor == 'rgb(255, 0, 0)') {
console.log('흰색');
return '#ff0000';
} else if (container.style.backgroundColor == '#ff0000') {
return '#0000ff';
} else if (container.style.backgroundColor == '#0000ff') {
return '#ff0000';
}
}
btn.onclick = function() {
const rndCol = random();
console.log(2,rndCol);
container.style.backgroundColor = rndCol;
}#container {
background-color: #e4d1bb;
width: 100px;
height: 100px;
}<h2 id="title">토글을 구현해보자</h2>
<article id="mission">
<p>JS를 이용해서 색변경 버튼을 누를때마다 버튼 아래에 있는 "안녕" 텍스트의 색이 빨강(#ff0000)와 파랑(#0000ff)로 번갈아가면서 변하도록 만들어주세요</p>
<p>빨강(#ff0000) -> 파랑(#0000ff) -> 빨강(#ff0000) -> 파랑(#0000ff) 의 순서가 되게 해주세요</p>
</article>
<div id="container">
<button>색변경</button>
<div id="text">안녕</div>
</div>