# How to get a cell to update in response to event?

**URL:** <https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072>\
**Category:** Help\
**Created:** [May 17, 2021, 2:46pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072 "2021-05-17T14:46:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 17, 2021, 2:46pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072/1 "2021-05-17T14:46:46Z")

</div>

I am still relatively new to working with Observable and its reactive model, so apologies if the answer to this question is obvious.

I understand how I can use an input element to trigger a cell to update. For example:

```auto
viewof updateButton = Inputs.button("Update")

```

```auto
rand = {
  updateButton; // Force recalculation when updateButton emits an input event
  return Math.random();
}

```

However, it is not clear to me how I can do something similar when not using an input element. For example how might I get a click on a Canvas to trigger an update?

```auto
myCanvas = {
  const ctx = DOM.context2d(200, 200);
  d3.select(ctx.canvas).on("click", (evt) =>
    console.log("How do I force rand to update?")
  );
  return ctx.canvas;
}

```

```auto
rand = {
  return Math.random();
}

```

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [May 17, 2021, 5:42pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072/2 "2021-05-17T17:42:44Z")

</div>

This is beginner friendly:

```auto
mutable rand = undefined

```

```auto
htl.html`<button onclick=${() => (mutable rand = Math.random())}>a rand?`

```

You can merge these things into a single thing with a viewof but it take a while to really grok this construction IMHO. It does highlight its HTML emitting “input” events is the fundamental signaling mechanism in Dataflow (mostly)

```auto
viewof randView = {
  let ui = htl.html`<div><button onclick=${() => {
    ui.value = Math.random();
    ui.dispatchEvent(new Event('input'));
  }}>a rand?`;
  return ui;
}

```

My internet is slow at the moment but there are some excellent canonical texts written by Observbalehq team on these concepts

“mutable” “hyper text literal” “views”

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 17, 2021, 6:35pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072/3 "2021-05-17T18:35:52Z")

</div>

Thanks @tomlarkworthy , but that’s not quite what I want (apologies if my question wasn’t clear enough). I don’t want to create any buttons (or other HTML input elements). Rather I want to be able dispatch the event generated by clicking on a canvas to another cell in order to force it to update itself. The example I provided used `Button` to do something similar, but I would like to use the click event on the Canvas instead.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 17, 2021, 6:46pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072/4 "2021-05-17T18:46:43Z")

</div>

You’re not limited to inputs. Any DOM element can be used, down to a simple [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget) instance (or anything that implements the same interface).

However, if you want to fully embrace Observable’s reactivity, you _have_ to:

1. use `viewof`,
2. dispatch an `input` event,
3. optionally assign a `value` property with a value that is not `undefined`

In your example, an implementation could look like this:

```javascript
viewof myCanvas = {
  const ctx = DOM.context2d(200, 200);
  ctx.canvas.value = true; // put anything here except undefined
  ctx.canvas.onclick = event => {
    // Relay a click as an input event, to notify Observable's Runtime
    // that dependant cells should be updated.
    ctx.canvas.dispatchEvent(new Event("input"));
  };
  return ctx.canvas;  
}

```

```javascript
rand = myCanvas, Math.random()

```

You may find this introduction to `viewof` helpful:

> **[What has viewof ever done for us?!](https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us)**
>
> A short introduction to viewof, in response to this post. viewof is an Observable macro (i.e., a "magic word") that allows you to create user interfaces for your values. Observable cells by themselves are rather boring: they can only store values,...

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 17, 2021, 6:58pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-to-update-in-response-to-event/5072/5 "2021-05-17T18:58:03Z")

</div>

Perfect thanks. Helpful in providing not only a working solution and reference article, but an indication of idiomatic event propagation in Observable.