Published
Edited
Dec 14, 2019
html`<p id="demo"></p>`
html`<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>`
html`<button onclick="this.innerHTML = Date()">The time is?</button>`
html`<button onclick="this.innerHTML = Date(); this.innerHTML += 'date'">The time is?</button>`
html`<button onclick="displayDate()">The time is?</button>` // cell 1 (it won't work as it is not a global in the notebook)
html`<button onclick="${displayDate()}">The time is?</button>` // cell 2 (Mike is going to make this work soon)
demo1 = html`<p id="demo1"></p>` // with a name, this cell can be put forward
solution1 = Object.assign(html`<button>The time is?</button>`, {onclick: displayDate})
solution2 = {
const button = html`<button>The time is?</button>`;
button.addEventListener("click", displayDate);
return button;
}
solution3 = html`<button onclick=${displayDate}>The time is?</button>` // the new html make it work
function displayDate() {
return document.getElementById("demo1").innerHTML = new Date().toLocaleTimeString();
} // not working
viewof update = html`<button>Update the time`
{
update;
return new Date().toLocaleTimeString();
}
import {html, svg} from "@observablehq/htl"
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.
