How to get value from HTML input

Community Help
1

I want to pull the value of an HTML number input and use it in a Plot visualization: Carbon Footprint / RND | Observable

I extract the value from the input by this line of code:

+document.getElementsByClassName(“quantity”)[0].value

Is there a way to update this cell, when the input value changes?

2

Yes, by turning your input into a proper viewof cell.

First off, please avoid global selectors in Observable notebooks and instead reference elements via variables. Otherwise you’re likely to introduce side effects that are difficult to discover and to debug.

Here’s what your input_salary cell would look like as a view:

viewof input_salary = {
  const input = htl.html`<input class="quantity" min="1" name="quantity" value=${value} type="number">`;
  const setValue = value => {
    input.value = value;
    // Let Observable know that the cell value has changed.
    input.dispatchEvent(new Event("input", {bubbles: true}));
  };
  const form = htl.html`<div class="number-input">
    <button onclick=${() => setValue(form.value - 100)} class="minus"></button>
    ${input}
    <button onclick=${() => setValue(form.value + 100)} class="plus"></button>
  `;
  // Expose the value to Observable.
  return Object.defineProperty(form, "value", { get: () => input.valueAsNumber });
}

You then simply reference the value via

input_salary