{"record":{"id":"e9d5efd5b6a8a7ce","repo":"yewstack/yew","slug":"element-with-id-mousemoveme-not-present-e9d5ef","errorCode":null,"errorMessage":"element with id `mousemoveme` not present","messagePattern":"element with id `mousemoveme` not present","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx","lineNumber":184,"sourceCode":"use wasm_bindgen::{prelude::Closure, JsCast};\nuse web_sys::{console, Document, HtmlElement, MouseEvent};\n\nlet mousemove = Closure::::wrap(Box::new(|e| {\n let rect = e\n .target()\n .expect(\"mouse event doesn't have a target\")\n .dyn_into::()\n .expect(\"event target should be of type HtmlElement\")\n .get_bounding_client_rect();\n let x = (e.client_x() as f64) - rect.left();\n let y = (e.client_y() as f64) - rect.top();\n console::log_1(&format!(\"Left? : {} ; Top? : {}\", x, y).into());\n}));\n\nDocument::new()\n .expect(\"global document not set\")\n .get_element_by_id(\"mousemoveme\")\n .expect(\"element with id `mousemoveme` not present\")\n .unchecked_into::()\n .set_onmousemove(mousemove.as_ref().dyn_ref());\n\n// we now need to save the `mousemove` Closure so that when\n// this event fires the closure is still in memory.\n```\n\nThis version is much more verbose, but you will probably notice part of that is because of failure\ntypes reminding us that some of these function calls have invariants that must be held, or otherwise will\ncause a panic in Rust. Another part of the verbosity is the calls to `JsCast` to cast into\ndifferent types so that you can call its specific methods.\n\n### Yew example\n\nIn Yew you will mostly be creating [`Callback`](concepts/function-components/callbacks.mdx)s to use in the\n[`html!`](concepts/html/introduction.mdx) macro so the example is going to use this approach instead of completely copying\nthe approach above:\n","sourceCodeStart":166,"sourceCodeEnd":202,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx#L166-L202","documentation":"This panic is `.expect(\"element with id `mousemoveme` not present\")` after `get_element_by_id(\"mousemoveme\")` in the web-sys guide. `Document::get_element_by_id` returns `Option`, None when no element in that document carries the exact id. The guide's example only works if the served page markup contains an element with `id=\"mousemoveme\"`; it also fails permanently when the lookup ran on the blank document produced by `Document::new()` (error 66), because a freshly constructed document has no elements at all.","triggerScenarios":"`index.html` has no element with `id=\"mousemoveme\"`; the script runs before the body is parsed (classic script in `` without `defer`); the id is misspelled; or the preceding `Document::new()` returned an empty document so the lookup can never succeed.","commonSituations":"Copy-pasting the web-sys.mdx mousemove demo without adding the tracked element to `index.html`; wiring the example into a template whose HTML shell omits the div; running under Trunk with the script tag placed before the target element.","solutions":["Add `

` (any element with that id) to `index.html`","Fix the document accessor first: use `gloo::utils::document()` instead of `Document::new()` (see error 66)","Load the script as `type=\"module\"` or with `defer` so the DOM exists before the lookup","Replace the expect with `if let Some(el) = ...` plus a `gloo::console::log` warning to fail soft when the element is absent"],"exampleFix":"\n\n

\n \n\n\n// before\nDocument::new()\n .expect(\"global document not set\")\n .get_element_by_id(\"mousemoveme\")\n .expect(\"element with id `mousemoveme` not present\")\n\n// after\nif let Some(el) = gloo::utils::document().get_element_by_id(\"mousemoveme\") {\n el.unchecked_into::()\n .set_onmousemove(mousemove.as_ref().dyn_ref());\n} else {\n gloo::console::warn(\"#mousemoveme not present\");\n}","handlingStrategy":"validation","validationCode":"let Some(el) = gloo::utils::document().get_element_by_id(\"mousemoveme\") else {\n gloo::console::warn(\"#mousemoveme not present — mousemove not attached\");\n return;\n};\n// attach the listener only when the element exists\nel.unchecked_into::()\n .set_onmousemove(mousemove.as_ref().dyn_ref());","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Add required ids to index.html before writing the Rust that looks them up","Keep element ids in a shared constants module used by both HTML template and Rust","Load the wasm entry as a module script (or defer) so the DOM is parsed first","Fail soft with a console warning for optional elements; reserve expect for hard app-shell invariants"],"tags":["web-sys","dom","get-element-by-id","panic"],"backgroundTag":"missing-dom-element","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}