{"record":{"id":"bac2b874f660a4f0","repo":"dotnet/AspNetCore.Docs","slug":"unable-to-bind-dom-element-id","errorCode":null,"errorMessage":"Unable to bind DOM element: ${id}","messagePattern":"Unable to bind DOM element: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"aspnetcore/signalr/authn-and-authz/sample/wwwroot/js/chat.ts","lineNumber":5,"sourceCode":"// DOM Binding\nfunction dom(id: string): T {\n const element = document.getElementById(id);\n if (!element) {\n throw new Error(`Unable to bind DOM element: ${id}`);\n }\n return element as T;\n}\n\nfunction showIf(condition: any, ifTrue: HTMLElement, ifFalse?: HTMLElement) {\n ifTrue.style.display = condition ? \"inherit\" : \"none\";\n\n if (ifFalse) {\n ifFalse.style.display = condition ? \"none\" : \"inherit\";\n }\n}\n\nconst chatDiv = dom(\"chatDiv\");\nconst errorDiv = dom(\"errorDiv\");\nconst logoutButton = dom(\"logoutButton\");\nconst connectingDiv = dom(\"connectingDiv\");\nconst connectedDiv = dom(\"connectedDiv\");\nconst messageForm = dom(\"messageForm\");","sourceCodeStart":1,"sourceCodeEnd":23,"githubUrl":"https://github.com/dotnet/AspNetCore.Docs/blob/c67a80103a1a74db20784debd919c7fdda96c510/aspnetcore/signalr/authn-and-authz/sample/wwwroot/js/chat.ts#L1-L23","documentation":"The SignalR chat sample's `dom` helper calls `document.getElementById(id)` and throws if the result is null. It is a hard fail to surface missing DOM bindings at startup rather than letting undefined element access cascade.","triggerScenarios":"Calling `dom('someId')` when no element with `id=\"someId\"` exists in the page at call time.","commonSituations":"Script runs before the DOM is parsed (script in `` without defer); element id renamed in markup but not in TS; conditional UI where the element is rendered later; typo in the id string; template not yet rendered by a framework.","solutions":["Ensure the script runs after the element exists — move the `