Published
Edited
Mar 1, 2021
viewof buttonWithValue = Button("Text on Button", {
label: "Click me:",
reduce: functionRunOnClick
})
functionRunOnClick = function() {
textChangedByButton.innerHTML = `<hr><h3><i>The Window of Change</i></h3>
Text <i>after</i> clicking button.<hr>`;
return "value of buttonsValue";
}
buttonWithValue
viewof selection = Select(["Nothing"].concat(["This", "That", "The Other"]), {
label: "Choose:"
})
{
let text = ``;
if (selection == "Nothing")
text = `<hr><h3><i>The Window of Change</i></h3>
Text <i>before</i>.<hr>`;
else
text = `<hr><h3><i>The Window of Change</i></h3>
Text <i>after</i> selecting ${selection}.<hr>`;
textChangedBySelect.innerHTML = text;
}
selection
textChangedByText = html`<hr><h3><i>The Window of Change</i></h3>
Text <i>before</i>.<hr>`
viewof textInput = Text({
label: "Type something:",
placeholder: "Yes, type over me ..."
})
{
let text = ``;
if (textInput == "")
text = `<hr><h3><i>The Window of Change</i></h3>
Text <i>before</i>.<hr>`;
else
text = `<hr><h3><i>The Window of Change</i></h3>
Text <i>after</i>: ${textInput}.<hr>`;
textChangedByText.innerHTML = text;
}
textInput
whichKey = document.addEventListener('keypress', e => {
return e.key;
if (e.key == "Enter") return "Enter pressed";
})
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.
