doc = html`
<div>그냥 내용</div>
<input id='night' type="button" value="밤">
<input id='day' type="button" value="낮">
<br>
<input id='toggle' type="button" value="밤"
style='background-color: blue; color: white; font: 18pt bold;'>
`
doc.tagName;
{
let e = doc.querySelector('div');
let nbtn = doc.querySelector('#night');
let dbtn = doc.querySelector('#day');
let tbtn = doc.querySelector('#toggle');
let night = () => {
e.style.color = 'white';
e.style.backgroundColor = 'blue';
};
let day = () => {
e.style.color = 'black';
e.style.backgroundColor = 'yellow';
};
// 밤 버튼에 이벤트 핸들러 등록
nbtn.addEventListener('click', night);
// 낮 버튼에 이벤트 핸들러 등록
dbtn.addEventListener('click', day);
// toggle 버튼에 이벤트 핸들러 등록
tbtn.addEventListener(
'click',
() => {
if (tbtn.value === '밤') {
night();
tbtn.value = '낮';
tbtn.style.backgroundColor = 'yellow';
tbtn.style.color = 'black';
} else {
day();
tbtn.value = '밤';
tbtn.style.backgroundColor = 'blue';
tbtn.style.color = 'white';
}
} );
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
