{"record":{"id":"b1f8e440a4fb3f3d","repo":"yewstack/yew","slug":"element-with-id-mousemoveme-not-present-b1f8e4","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.23/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: MouseEvent| {\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.23/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 Yew 0.23's web-sys guide. The lookup returns `Option`, None when no element in the looked-up document has that exact id. The demo requires `
` in the served HTML; it also always fails if the preceding `Document::new()` (error 75) produced an empty constructed document rather than fetching the global one.","triggerScenarios":"`index.html` lacks `id=\"mousemoveme\"`; the script executes before the target element is parsed (classic script in ``); id typo; lookup performed on the blank document returned by `Document::new()`.","commonSituations":"Copy-pasting the 0.23 web-sys.mdx demo into a Trunk project without adding the tracked div; script-tag ordering issues; template shells that omit the element.","solutions":["Add `
` to `index.html`","Replace `Document::new()` with `gloo::utils::document()` so you search the real page (see error 75)","Load the script as a module or with `defer` so the element exists first","Swap the expect for `if let Some(el)` with a console warning for a soft failure"],"exampleFix":"\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 .unchecked_into::()\n .set_onmousemove(mousemove.as_ref().dyn_ref());\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}","handlingStrategy":"validation","validationCode":"let Some(el) = gloo::utils::document().get_element_by_id(\"mousemoveme\") else {\n gloo::console::warn(\"#mousemoveme not present\");\n return;\n};\n// proceed to attach the handler only when the element exists","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Add the tracked element to index.html before wiring listeners","Use the global document (gloo::utils::document()), not Document::new(), for lookups","Load the entry script as a module or defer so DOM is parsed first","Centralize required DOM ids and check them at startup"],"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"}