i am trying to execute the document.addEventListener() but it is not working why ?
<html>
<head>
<title>javascript</title>
<link rel="stylesheet" href="C:\Users\SUDARSHAN\Desktop\html_UI\eventstyle.css">
</head>
<body>
<p id="p1">Welcome</p>
</body>
<script>
function f1() {
document.getElementById("p1").style.fontSize="50px";
}
document.addEventListener("load",f1);
console.log("hello");
</script>
</html>
You must append a load listener to window instead of document.
window.addEventListener("load",f1);
That being said, you cannot have a script element as a child of the html element, it must be in the head or body (which are the only allowed children of html). Always make sure your HTML is valid at all times; invalid HTML puts you in unspecified territory and tends to make things unpredictable (even if things seem to work).
Flaws in above code.
html tag documented correctly. For ref https://www.w3schools.com/tags/tag_doctype.aspload event depends on window. In above code, you added the listener for document.You can try following:
document.addEventListener('DOMContentLoaded', f1);
There are two events which are related to loading and unloading of the Document
Refer this page for windows events https://developer.mozilla.org/en-US/docs/Web/API/Document#load_unload_events