Public
Edited
Mar 2, 2023
Insert cell
Insert cell
Insert cell
MyInput = () => {
let node = html`<b>Hello</b>`
node.value = 10
return node
}
Insert cell
Insert cell
viewof example = MyInput()
Insert cell
example
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too
}
Insert cell
Insert cell
viewof example2 = {
let node = document.createElement('p')
let choices = ['Cat', 'Dog', 'Fish']
for (let x of choices){
let child = document.createElement('a')
child.innerText = x
child.onclick = ()=>{set(node, x)}
node.appendChild(child)
node.appendChild(document.createTextNode(' ')) // เว้น space ด้วย จริงๆ ใช้ css น่าจะสวยกว่า
}
return node
}
Insert cell
example2
Insert cell
Insert cell
MySelect = (choices) => {
let node = document.createElement('div')
for (let x of choices) {
let child = document.createElement('a')
child.innerText = x
child.onclick = ()=>{set(node, x)}
child.style.margin = '5px'
node.appendChild(child)
}
return node
}
Insert cell
Insert cell
animal
Insert cell

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.
Learn more