Back to radio button default when clicking on another buttin

Community Help
1

I am trying to create a simple tool to annotate pairs based on observable js : Test outil annotation / Lino Galiana | Observable

I have two input buttons in this notebook:

  1. Radio button to choose if we have pairs or not
  2. A button to increment to next example

The radio button is created like that:

decision_label = [
  {text: "Accepter 👍️", color: "green", decision: "Accepted"},
  {text: "Rejeter 👎️", color: "red", decision: "Rejected"},
  null
]

viewof decision = Inputs.radio(
  decision_label,
  {label: "DĂ©cision",
   format: x => (x == null) ? html`<span style="border-bottom: solid 2px blue; margin-bottom: -2px;">DĂ©cision Ă  prendre` : html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x.color}; margin-bottom: -2px;">${x.text}`,
   value: null
  }
)

The other button is created like that:

viewof count = {
  let value = 0;
  const button = html`<button>Nouvel exemple Ă  annoter !</button>`;
  Object.defineProperty(button, "value", { get() { return value; } });
  button.onclick = () => {
    ++value;
  };
  return button;
};

I would like the radio button to come back to null value when I click on the other one. I guess this has something to deal with button.onclick but I do not manage to override decision value.

Do you have any idea ?

1 Like
2

Observable’s reactivity makes this pretty easy, actually: You can simply make your radio button depend on count. That way, the radio button will regenerate when count increments. The easy way to accomplish this to replace

viewof decision = Inputs.radio(...)

with

viewof decision = (count, Inputs.radio(...))

Incidentally, I’m not quite sure why you’re building your own button, rather than using Inputs.button? Sometimes, you might need to do that but I don’t see the advantage in your specific code.

3

Wow that worked, thanks a lot !

I was not aware of that (count, Inputs.radio(...)) trick.

I had seen the counter button trick on a community help thread but maybe this is not necessary in my case, I will try to make it with the default behavior

1 Like
4

Incidentally, I’m not quite sure why you’re building your own button, rather than using Inputs.button? Sometimes, you might need to do that but I don’t see the advantage in your specific code.

Indeed, now that the button simplifies, a viewof count = Inputs.button("Nouvel exemple Ă  annoter !") works fine. Thanks again for your suggestions !