{"record":{"id":"7aeaef7a4c71eb1e","repo":"yewstack/yew","slug":"element-with-id-mousemoveme-not-present","errorCode":null,"errorMessage":"element with id `mousemoveme` not present","messagePattern":"element with id `mousemoveme` not present","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx","lineNumber":185,"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":167,"sourceCodeEnd":203,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx#L167-L203","documentation":"get_element_by_id returns Option, and this expect fires when no element with id mousemoveme exists at call time. In the tutorial context the usual cause is ordering: the script runs (from , without defer) before the element has been parsed. Otherwise it is a plain mismatch - a typo, a case difference, or an element the framework has not rendered yet.","triggerScenarios":"Module-level or #[wasm_bindgen(start)] code querying the DOM during page parse; ids that differ by case or typo; elements rendered later by the framework or injected by scripts.","commonSituations":"Script tag in without defer; copying the example without adding

to the page; dynamic ids; tests with incomplete DOM fixtures.","solutions":["Run the lookup after DOMContentLoaded, or move the script to the end of / add defer","Verify the id string matches the markup exactly (ids are case-sensitive)","Handle the Option: match document.get_element_by_id(...) { Some(el) => ..., None => log }","For framework-rendered elements, query from a component lifecycle hook instead of startup code"],"exampleFix":"// before\nlet el = gloo::utils::document()\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 web_sys::console::warn_1(&\"missing #mousemoveme\".into());\n}","handlingStrategy":"validation","validationCode":"// Handle the Option instead of expecting, especially at startup:\nmatch gloo::utils::document().get_element_by_id(\"mousemoveme\") {\n Some(el) => attach_listener(&el),\n None => web_sys::console::warn_1(&\"#mousemoveme not present (yet)\".into()),\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Run DOM lookups after DOMContentLoaded (or defer the script) when elements live in static HTML","Query framework-rendered elements from lifecycle hooks, not startup code","Copy ids exactly - they are case-sensitive"],"tags":["docs","dom","element-not-found","timing"],"backgroundTag":"element-not-found","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}