M docs/example/assets/js/components/AddTodoForm.js → docs/example/assets/js/components/AddTodoForm.js

@@ -1,35 +1,37 @@ 
 import h3 from "../h3.js";
 
 export default function AddTodoForm() {
+  const focus = () => document.getElementById("new-todo").focus();  
   const addTodo = () => {
-    const newTodo = document.getElementById("new-todo");
     if (!newTodo.value) {
       h3.dispatch("error/set");
       h3.redraw()
-      document.getElementById("new-todo").focus();
+      focus();
       return;
     }
     h3.dispatch("error/clear");
     h3.dispatch("todos/add", {
       key: `todo_${Date.now()}__${btoa(newTodo.value)}`, 
-      text: newTodo.value,
+      text: newTodo.value
     });
     newTodo.value = "";
     h3.redraw()
-    document.getElementById("new-todo").focus();
+    focus();
   };
-  const addTodoOnEnter = (event) => {
-    if (event.keyCode == 13) {
+  const addTodoOnEnter = (e) => {
+    if (e.keyCode == 13) {
       addTodo();
-      event.preventDefault();
+      e.preventDefault();
     }
   };
+  const newTodo = h3("input", {
+    id: "new-todo",
+    placeholder: "What do you want to do?",
+    oninput: (e) => newTodo.value = e.target.value,
+    onkeydown: addTodoOnEnter,
+  });
   return h3("form.add-todo-form", [
-    h3("input", {
-      id: "new-todo",
-      placeholder: "What do you want to do?",
-      onkeydown: addTodoOnEnter,
-    }),
+    newTodo,
     h3(
       "span.submit-todo",
       {

M docs/example/assets/js/h3.js → docs/example/assets/js/h3.js

@@ -312,7 +312,7 @@ oldvnode.id = newvnode.id;
     }
     // Value
     if (oldvnode.value !== newvnode.value) {
-      node.value = newvnode.value;
+      node.value = newvnode.value || "";
       oldvnode.value = newvnode.value;
     }
     // Classes

M docs/js/h3.js → docs/js/h3.js

@@ -312,7 +312,7 @@ oldvnode.id = newvnode.id;
     }
     // Value
     if (oldvnode.value !== newvnode.value) {
-      node.value = newvnode.value;
+      node.value = newvnode.value || "";
       oldvnode.value = newvnode.value;
     }
     // Classes

M h3.js → h3.js

@@ -307,12 +307,12 @@ return;
     }
     // ID
     if (oldvnode.id !== newvnode.id) {
-      node.id = newvnode.id;
+      node.id = newvnode.id || "";
       oldvnode.id = newvnode.id;
     }
     // Value
     if (oldvnode.value !== newvnode.value) {
-      node.value = newvnode.value;
+      node.value = newvnode.value || "";
       oldvnode.value = newvnode.value;
     }
     // Classes
@@ -331,7 +331,7 @@ oldvnode.classList = newvnode.classList;
     }
     // Style
     if (oldvnode.style !== newvnode.style) {
-      node.style.cssText = newvnode.style;
+      node.style.cssText = newvnode.style || "";
       oldvnode.style = newvnode.style;
     }
     // Data