doc = html`<div><button>뻥</button></div>`
doc.children.length
doc.querySelector("button").addEventListener( "click", handler )
handler = {
const handler = e => {
doc.querySelectorAll("button").forEach( b => doc.appendChild( b.cloneNode(true) ) )
doc.querySelectorAll("button").forEach( b => b.addEventListener("click", handler) )
}
/* // 당첨 학생 제출 정답2
// - for, while 사용을 제한하는 조건을 회피해 재귀함수 사용
let handler = e => {
const goal = doc.children.length * 2
recursion(e.target, goal)
}
let recursion = (button, goal) => {
if (doc.children.length < goal) {
doc.appendChild(button.cloneNode(true))
doc.lastChild.addEventListener("click", handler)
recursion(button, goal)
}
}
*/
return handler
}
/* // 당첨 학생 제출 정답1
// 모범답안과 기본적으로 같은 방법 (9주차 이후 진도에 있는 appendChild 대신에 innerHTML을 사용)
function handler()
{
let copy = doc.innerHTML
console.log(copy) // 디버깅 용 출력이라 이 줄은 없어도 됨
doc.innerHTML += copy
let cols = doc.querySelectorAll('button')
cols.forEach.call(cols,function(col){ col.addEventListener("click",handler); })
}
*/
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.
