linking external JS files in another folder in HTML - javascript

I am trying to link a javascript file to my html but its in another folder here's my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>PreFab Davao</title>
</head>
<body>
<script src="../src/pages/testing.js"></script>
<h1>testing</h1>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
the problem is it throws an error:
Uncaught SyntaxError: Unexpected token '<' (at testing.js:1:1)
the contents of testing.js is litteraly just console.log("TEST")

Related

ERR_FILE_NOT_FOUND in console but the app works correctly

In my app I get error message in console
GET chrome-extension://lncjpblllfcpljbdelleomhnlgdlhhmm/content/styles.css net::ERR_FILE_NOT_FOUND
after every new request, but in the same time I do not see any other issues and application seems to be running correctly. Currently I cannot look up any line in my code files where the styles.css file is mentioned (only App.css and all.css).
Why cannot this file be found and how can I fix it?
Here is an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Welcome to DevConnector!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

How to load a JavaScript file in the Blazor client index.html

I have the following JavaScript code in a .js file:
export function testAlert() {
alert('Testing Blazor');
}
When I added this to my Razor component, I get a warning:
I added the following to the index.html file - as recommended:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorTest</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorTest.styles.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/testing.js"></script>
</head>
Modified the component accordingly:
#inject IJSRuntime JS
protected override async Task OnAfterRenderAsync(bool firstRender)
{
base.OnAfterRenderAsync(firstRender);
await JS.InvokeAsync<string>("testAlert");
}
When I load the page, I get the following error:
Unhandled exception rendering component: Could not find 'testAlert' ('testAlert' was undefined).
I checked the source of the page, and it looked like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorTest</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorTest.styles.css" rel="stylesheet" />
</head>
What happened to the modified index.html with the loaded script?

Sometimes the index.html file is cached by the browser. That may be the case here.
Usually forcing a refresh with Ctrl-F5 will force a download of the newly edited file.

How to render markdown in ejs page

i want to create small blog using express , ejs and markdown but when i tried to load markdown on page i saw this:
my code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<%=title%> <%=body%>
</body>
</html>

It is simple you have to change your tags to <%- yourVar%>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<%-title%> <%-body%>
</body>
</html>

Webview tag not working for my chrome app

So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.

Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.

BitWasp doesn't load CSS and Js

I have just installed bitwasp and now i ran into this problem with a php generated html file, it doesnt load the CSS and the javascript because its pointed to the index.php.
Is there some fix in Php or need i to change my Apache server settings
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="open source bitcoin marketplace" />
<title>Welcome | BitWasp</title>
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/style.css">
<!-- JavaScript -->
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/jquery-1.8.1.min.js"></script>
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/bootstrap.js"></script>
</head>
Thanks in advance

Categories