How to debug why an onload does not work in JavaScript? - javascript

This is a test code. It is suppose to show "How are you doing today? Buddy", but it does not show anything on the page right now and console does not say anything. Anyone knows why?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function demo() {
let newPara = window.document.createElement("p");
newPara.innerHTML = "<h1>How are you doing today? Buddy</h1>";
document.body.append(newPara);
}
</script>
</head>
<body>
<div onload="demo()">
</div>
</body>
</html>

You can't attach onload event on div.
You can attach it to body element.

Related

Changing the value of paragraph using external js file code

I have created an html file
<html>
<head>
<title>test</title>
</head>
<body>
<p id="demo">l</p>
<script type="text/javascript" src="profile/test.js">
s(shiva);
</script>
</body>
</html>
i want to change the value of the paragaraph. So my external js file is
function s(nam) {
document.getElementById("demo").innerHTML = nam;
}
But is not changing can anyone suggest me how can change the value.
You can not include code in a javascript tag with a "src" attribute. So move the loose javascript in a new tag.
<script type="text/javascript" src="profile/test.js"></script>
<script type="text/javascript">
s('shiva');
</script>

Simple jQuery "<script defer" not working

I'm trying to defer a very simple jQuery test, in order to optimize the speed of my website:
This is the jQuery test:
<html>
<head>
<title>Test Defer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">$(document).ready(function(){$("#jquerytext").html("Hello World by JQuery");});</script>
Hello World by HTML
<div id="jquerytext"></div>
</body>
</html>
It works correctly. However, if I change the call to the jQuery libraries:
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
it won't work.
Am I doing something wrong? Thank you.
As rightly pointed in the nice comments, it should have used 'window.onload' event, because it will fire after all page is loaded including deferred scripts.
<html>
<head>
<title>Test Defer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
$(document).ready(function(){$("#jquerytext").html("Hello World by JQuery");});
};
</script>
Hello World by HTML
<div id="jquerytext"></div>
</body>
</html>

Sweet Alert does not work

okay, first off, i am new to this. I was instructed to use sweet alert for the alerts in our project. I see to it that it will work so i made a simple one on a different file and made something like the code below, but it's not working. The Sweetalert is not showing. Did i miss something?
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
</head>
<body>
<script>
swal("Hello World");
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" />
</body>
</html>
You are calling Sweet alert before it has been declared and linked to your HTML document. Move the script reference to sweetalert.min.js to the head of your page. And also, script tags cannot be self closing. You need to close the script tag by doing </script>, like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<script>
swal("Hello World");
</script>
</body>
</html>

Javascript alert not working on button click

I have typed in the javascript just as you have but on a separate file linked through the HTML file. The button shows up however I am not getting any alert when it is clicked. My code is as follows:
Javascript(index.js):
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
</html>
Anyone know why my button is not working? It seems to me all my code is in order unless I am overlooking something.
Your code is being executed prior to the element it refers to existing in the page. Move the JavaScript to the end of the document or wrap it in a window.onload function.
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
jsFiddle example
You need to wait for the document to be constructed before you can reference elements in it.
Put your script tag in body, just before the end. This will ensure that the document is there when the script runs.
Or, you can wrap your js in a load listener like this
window.addEventListener("load", function(){
//...your stuff here
})
You should not put <script type="text/javascript" src="index.js"></script>
before <body></body>, because when the browser is trying to register the event, the <button> is not loaded already. So when you take a look at the control panel, you would get something like TypeError: document.getElementById(...) is null.
The right version might be
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
Sometimes you should put script code below the button
<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
first thing is you haven't included jquery in your code, change your HTML to this
!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
and your index.js to
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
this worked for me hope this work for you too

This HTML fails to run the alert() script. Why? Yes. jquery is installed in the correct relative location

The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly:

Categories

Resources