# Adding new data onclick does not reflect everywhere

**URL:** <https://talk.observablehq.com/t/adding-new-data-onclick-does-not-reflect-everywhere/4778>\
**Category:** Help\
**Created:** [March 14, 2021, 12:25pm UTC](https://talk.observablehq.com/t/adding-new-data-onclick-does-not-reflect-everywhere/4778 "2021-03-14T12:25:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![oncletom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oncletom/32/4670_2.png) [@oncletom](https://talk.observablehq.com/u/oncletom)\
**Post date:** [March 14, 2021, 12:25pm UTC](https://talk.observablehq.com/t/adding-new-data-onclick-does-not-reflect-everywhere/4778/1 "2021-03-14T12:25:34Z")

</div>

Hello,

I’m writing my first Notebook after seeing great example from friends, so I’m taking a spin at it.

Here, [Calcul des frais kilométriques d'auto-partage / Thomas Parisot / Observable](https://observablehq.com/@oncletom/frais-kilometriques-autopartage), I have an array of items. They are displayed as rows of `Text()` and `Textarea()`. There is a `Button()` to add a new row to the data.

I have two problems:

1. when I click the “Add New” button, I can see the returned value is updated, but neither the HTML representation of it, neither the data at the bottom — I need to click on the cell for it to be refreshed
2. when I modify a value via the “HTML form”, it does not seem to reflect anywhere. I’m not sure how reactivity works in this case. I’ve only seen examples where inputs where notebook variables :-/

Thanks for your help, it’s an amazing tool and I love how friendly this forum is.

See you around!

Thomas

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [March 14, 2021, 3:53pm UTC](https://talk.observablehq.com/t/adding-new-data-onclick-does-not-reflect-everywhere/4778/2 "2021-03-14T15:53:54Z")

</div>

> [@oncletom](#):
>
> when I click the “Add New” button, I can see the returned value is updated, but neither the HTML representation of it, neither the data at the bottom — I need to click on the cell for it to be refreshed

The easiest way to get the HTML to update is to ensure that it depends explicitly on the button push. Thus, simply add the name of the button to your `entretiens_html` variable. Thus, the first two lines might look like so:

```
entretiens_html = {
  add_entretien;

```

Here’s the result:

https://observablehq.com/embed/7279a2818352d137?cells=entretiens_html%2Cviewof+add_entretien

> [@oncletom](#):
>
> when I modify a value via the “HTML form”, it does not seem to reflect anywhere.

Since your `entretiens_html` is a `viewof`, you might be able to pull the same trick and get away with including `entretiens_html` in any cell that you want to update. I’m not sure exactly which cells you want to update or how you want them to update but I suspect it might be trickier than that. In that case, you might want to add an event listener using standard Javascript tools. For example, following button could be used to increment a `mutable` variable `n`:

```
button_with_listener = {
  let b = Button('Hit me')
  b.addEventListener("click", function() {
    mutable n = n+1
  });
  return b
}

```

Here’s that in action:

https://observablehq.com/embed/7279a2818352d137?cells=n%2Cbutton_with_listener

---

<div class="post-metadata">

**Author:** ![oncletom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oncletom/32/4670_2.png) [@oncletom](https://talk.observablehq.com/u/oncletom)\
**Post date:** [March 14, 2021, 6:15pm UTC](https://talk.observablehq.com/t/adding-new-data-onclick-does-not-reflect-everywhere/4778/3 "2021-03-14T18:15:52Z")

</div>

Thanks Mark, you definitely helped me to get back on track 🙂

It totally worked to remove the `viewof` and to declare the “Add New” as a dependency. I get it’s used for the dependency graph I’ve seen a few schemas here and there.

I still have to figure out a few things to mutate within an array, it’s still not that straightforward. I’ll work on it with a cool header later on. Thanks so much for your help so far!

---

<div class="post-metadata">

**Author:** ![oncletom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oncletom/32/4670_2.png) [@oncletom](https://talk.observablehq.com/u/oncletom)\
**Post date:** [March 15, 2021, 2:17pm UTC](https://talk.observablehq.com/t/adding-new-data-onclick-does-not-reflect-everywhere/4778/4 "2021-03-15T14:17:05Z")

</div>

Okay, with your help, [Agnes Chang’s notebook](https://observablehq.com/@agness/demo-mutable-variables-and-multi-input-cells) and [Basile](https://basilesimon.fr/) help, managed to catch the data dependency thingy.

I made 2 changes:

https://observablehq.com/embed/@oncletom/frais-kilometriques-autopartage?cells=viewof+entretiens_html%2Cviewof+add_entretien
1. I transformed it as a `viewof`, updated its `value` and dispatched an event on each field update.

2. Then I added it as a dependency of `vehicule_depenses_entretien` variable:

```auto
vehicule_depenses_entretien = {
  entretiens_html;
  
  return entretiens_data.reduce((sum, d) => sum + d.prix, 0)
}

```

This way, whenever a field is updated, my reactive sum is updated, etc.

Thank you so much!