I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
Related
Consider these files:
index.html
<!doctype html>
<html>
<body>
<p id="remove">This will be removed!</p>
<script src="script.js"></script>
</body>
script.js
document.getElementById("remove").innerHTML = ("");
Is there a way to block script.js from executing?
This is for a CTF challange
Maybe I should also mention that I cant edit any of these.
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
function theDomHasLoaded(e) {
document.getElementById("remove").innerHTML = ("");
}
<!doctype html>
<html>
<body>
<p id="remove">This will be removed!</p>
<script src="script.js"></script>
</body>
I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>
I have this simple HTML page:
<html>
<head>
<script>
share();
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
I need to call the function share from the <head> and the function itself must be defined in the <body>.
The above code leads to undefined function error.
This is just a simplified script to explain the issue so it needs to be done that way. Is there a way around this?
You need to wait for the body to be loaded, so
<html>
<head>
<script>
window.onload=share;
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
You can use
<html>
<head>
<script>
windows.onload = function(){
share();
}
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
or you can use Jquery version
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
Both of them work in this condition however if you want to know the difference between this tow I suggest to see this
window.onload vs $(document).ready()
Use
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>
I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.