Now that you know your way around hyperscript you are ready to experience the true power of virtual DOM. All that is needed to control the rotation of the flying saucer is an input element. In order to work, the input element needs two properties.

  • value should be set to the rotation variable
  • oninput should be set to an event handler function that updates the rotation variable

In the helloworld example this construction looks as follows:

h("input", { type: "text", value: name, oninput: handleNameInput })

We have already prepared the DOM tree and provided the oninput event handler. All that is left to do is wire up the input element as described above.

Press next to start. Good luck.