I'm messing around with the default Blazor WASM scaffolded application from Visual Studio 2022 (.NET 6).
Specifically just trying to call a JS function (that's in its own file) from a method in one of the components.
Is there a specific place to put custom JS references? Some special way to load them so the file is instantly loaded/brought down into the browser?
On the first load, my JavaScript function can't be found. (it looks like the file isn't even under "Sources" in my browser inspector)
I hit a button in the component/on the page, it calls a C# method, which then tries to invoke the JS function. But it fails and the little banner at the bottom of the screen pops up (seems like the default for the scaffolded app?) and I hit the "Reload" link...and then boom...it can find my JS function suddenly the next time I hit the button.
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'setElementTextById' ('setElementTextById' was undefined). Error: Could not find 'setElementTextById' ('setElementTextById' was undefined).My index.html file looks like (only thing I changed was a script reference to my JS file):
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>BlazorWASM</title><base href="/" /><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /><link href="css/app.css" rel="stylesheet" /><link href="BlazorWASM.styles.css" rel="stylesheet" /></head><body><div id="app">Loading...</div><div id="blazor-error-ui"> An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss">🗙</a></div><script src="_framework/blazor.webassembly.js"></script><script type="text/javascript" src="js/site.js"></script></body></html>The JavaScript file:
window.setElementTextById = (id, text) => { console.log("inside setElementTextById"); document.getElementById(id).innerText = text;};I have also tried (with the same error results):
function setElementTextById(id, text) { console.log("inside setElementTextById"); document.getElementById(id).innerText = text;}