external js file loaded but the code don't working - javascript

when I write js code internally in the html file It's work well.
hre is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./cs.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="root" onload="App">
</div>
<script src="js/App.js" type="module" />
</body>
</html>
and here is App.js file
import Insert from './Insert.js';
function App(){
document.getElementById("root").insertAdjacentHTML("afterbegin",'<h1>hello Javascript</h1>');
};

onload is not an attribute supported by div elements, generally if you use it you would apply it to the body element, but it should be avoided in favour of addEventListener
The value of the onload attribute is the body of a JS function. Just mentioning the name of another function doesn't do anything. If you want to call a function you would usually follow the name with ().
type="module" loads a JS module, which (among other things) means the outer scope is the module and not the global scope so you can't access App anyway. Again, use addEventListener.
The </script> end tag for the script element is mandatory and you omitted it. (Since it was that last thing in the document it probably won't break anything, but you are opening yourself up for future problems).

Related

javascript defer keyword not behaving as expected

As far as I know, if we set defer keyword on a script tag it will not block the rest of the page to render, the rest of the page will be rendered and just before the window load event the script tag will be executed.
I have a simple HTML and which has a script tag with a defer attribute. Inside the script tag, I have a long loop so that it will take time, and below this script tag, I have a paragraph tag as well. Ideally, when I will reload the browser, my all the content should be rendered and then script execution should be there, but the last paragraph is not being rendered earlier as expected.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hi I am a p tag</p>
<img src="./img/Screenshot 2020-07-25 at 11.50.51 PM.png" />
<input type="text" />
<link rel="stylesheet" href="./css/styles.css">
<script type="text/javascript" src="./src/file1.js" defer></script>
<p>I will be rendered earlier as above javascript file has a defer attribute</p>
</body>
</html>
The script isn't the problem here. It is your link tag causing the issue.
You can see this demo here;
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_defer
If you add this line within the body;
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.10/css/bootstrap.css" />
Watch how the p tags now render after the alert.
The problem isn't the script tag, it's the link tag. It should be located inside of <head>, not on <body>.

Visual studio not recognizing src attribute when trying to refer to the index.js file

I am writing my javascript code in the file "index.js". When I use the src attribute in the "index.html" file it is not working. I am using visual basic editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script> src="index.js" </script>
</body>
</html>
When I run live server I would like for it to execute the code in both files.
When using the <script> tag, you should use the src as an attribute, not Html Content.
So instead of doing:
<script> src="index.js" </script>
You should do:
<script src="index.js"></script>
To learn more about attributes, I highly suggest looking it up on sites such as w3schools.
As SLasks mentioned in the comment, srcis an attribute not a content meaning your scripttag should like this:
<script src="index.js"> </script>

Integrate widget in existing html without css conflict

I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.
**Sample html :**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="abc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="abc.js" type="text/javascript"></script>
</head>
<body>
<!-- WIDGET CODE-->
<!DOCTYPE html>
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="def.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="defjs" type="text/javascript"></script>
</head>
<body>
.......widget html code
</body>
</html>
<body>
</html>
With HTML you are not allowed to have two HTML documents in a single file.
One approach to solve this is by using an iframe in your main HTML:
<iframe src="widget.html"></iframe>
So you create your widget in its own HTML file with its own styles and javascript scripts, and embed it in your main HTML file using the iframe (then your widget is completely isolated from your main HTML scripts and styles and not be affected by them).
Another approach will be to create a separate CSS for you widget and include it in your main HTML, then insert your widget's markup only (without the html and body tags) in your main HTML body.
In your widget CSS file you should create a "namespace" for you widget's style that will not collide with the rest of your CSS by doing something like this:
.my-widget-name {
// your widget styles
}
.my-widget-name span.name {
// your widget style
}
.my-widget-name .box {
// your widget style
}
.......
.......
(I usually like to use something like LESS, but shown above is a traditional CSS example)
"my-widget-name" should be a unique class name that only your widget is using, and by sub-classing all of your widget styles under this class name, you are basically isolating it from the rest of your CSS.
Hope it helps a bit

How to load AngularJS in a div

I have a main page with this structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>..:: Test Application ::..</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
function loadOption(idopt){
if(idopt==1){
var curl = '../view/otherpage.php'
}
$("#mainContainer").load(curl);
}
</script>
<body onLoad=loadOption(<?php echo idopt;?>)>
<div id="mainContainer"></div>
</body>
</html>
otherpage.php
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
But, when i load the main page... the AngularJS doesn't run. What could be wrong?
That's because you're loading otherpage.php after the DOMContentLoaded event has finished.
In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.
So in order to get it to work, you'll have to manually bootstrap Angular.
Here's Angular's documentation about it:
http://docs.angularjs.org/guide/bootstrap
Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.
Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.
We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...
make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page

jQuery + jQuery mobile load script twice when script tag is emebedded in body

i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.

Categories